私のもうひとつのサイト「サッぽろ、ニッキ。」は６年前程に一から作成した自作のテーマ。
こちらを新しい形式にしてみたので、忘れないよう書いておく。

変更前

変更後

class="…"のところはCSSの表示なので関係なし。

太字になっている部分が変更部分。
どこが変わったのかというと…

1. 全体を囲んでいる<div>に
   itemscope itemtype="https://schema.org/BreadcrumbList"
   が追加されています。
2. 各パンくず項目を囲んでいる<li>に
   itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"
   が追加されています。
3. リンク部分である<a>に
   itemprop="item"
   が追加されています。
4. <span>には
   itemprop="name"
   が追加されています。
5. <a>タグが終わった後には
   <meta itemprop="position" content="1" />
   が追加されています。

出力されると以下の通り

上のはトップページの場合の表示だけど、階下のカテゴリー、例えば
　ホーム＞カテゴリー名＞記事のタイトル
のときは、以下の様に書くとの事。

階層ごとに、meta itemprop=に順番がつきます。

最初ちょっとエラーになったけど、上記のように書くとOKでした。
（エラーの原因だったのは、「ホーム」のテキストがなかったため…CSSで家のアイコン表示しいて、テキスト出力がなしだった。）

他にも対応方法があるのだけど、変更もなかなか手間だし。
とりあえずはこんな感じでよいらしいので、これで行こうと思う。

今回空いた時間にSSL化の修正をするつもりが、ポロポロと色々な直し部分が見つかっている。
仕方ない。地道にちょっとずつやっていくしかないかなー。

入れる箇所は、<head></head>の間。
このタグの意味は、サイト内のトップページの場所を検索エンジン側に伝えるというものです。

他にも
検索エンジンに登録してほしいURLがある時（URLの正規化）は

を記述すると、正しいURLを検索エンジンに伝えることができます。

後は、サイト内検索ページがある時などは

おなじみ（？）のサイトマップは以下の通り

このようなタグは、WordpressなどのCMSには、一通り入っています。
ですが、内容を知っているに越したことはないと思ってます。

HTMLサイトの制作時などに適時入れて、サーチエンジンにちゃんとインデックスされるようにしたいですよね。

以下のブログは、私の趣味のブログ。テーマはイチから作りました。
サツぽろ、ニッキ。

メリット・デメリットは…の前に。

テーマをフルビルドするにあたって、

当時やりたかった事

1. レスポンシブデザイン
   タブレットの横置きでサイドバーの２カラム、縦置きでサイドバーなし１カラム
2. 投稿記事下にウェジェットエリア
   更にカテゴリーによって表示するウェジェットエリアを変える
3. フッターにウェジェットエリア３つ追加

   みたいな事と、
   他に

4. 読み込みファイルを後で見やすいようにする

   みたいな事。

１．レスポンシブデザイン
レスポンシブデザインは、よくあるCSSで切り替え。
当時は、ナビ部分を、wp is mobile関数で表示変更したり、jQueryで切り替えたり、どちらも行ってみたのだけど、結局jQueryにしました。
（別なサイトでmegamenuなど使う場合は、PC版メニュー・モバイル版メニューを作って、mobile関数で切り替える方法もしてました。その方が案外楽だったりもします。）

２．投稿記事下にウェジェットエリア
投稿ページ下に別ファイルを読み込み
読み込んだファイルは各カテゴリを判別しウェジェットエリアを表示する形
となっていました。

３．フッターにウェジェットエリア３つ追加
これは、書いてあるそのままですね。
ウィジェットエリアを追加するというのは、functions.phpにちょっと追加するだけで、無限に増やせるので便利。

４．読み込みファイルを分けて後で見やすいようにする
　グローバルナビ以外にも、投稿記事下にウェジェットエリア、GoogleAnalyticsのコード、パンくずリスト、別ファイルにして読み込ませているので、直す時、すごく楽。
　テーマを作ったのが、もう６年も前で内容もやや忘れていたのだけど、久々に見ても、どこに何書いて何を表示させているのかすぐ判る、という便利さ。

メリット

WordPressのテーマの内容がよくわかった。
functions.phpにほぼショートコード書いておけば、何とかなるとか。
頻繁に修正したい部分は別ファイルにして読み込ませるとか。
プラグインで対応していた事もfunctions.phpに書けば出来たりする事とか。
SEOのタグとか好きに入れられる事とか。
何か変になったらデバックモードで確認する事とか。

デメリット

WordPressのバージョンアップ、PHPのバージョンアップ時にブログが真っ白になる事がある。

といっても、すぐにデバックモードにしてテーマを直せばいいのだけど。
何か面倒な処理をさせていたら、バージョンアップ時に調整が必要なるのが、自作テーマの面倒なところ。

既存のテーマであれば、不具合がテーマ制作者（社？）が対応してくれるのもあるので、安心感はあるよねー。

なので、自作テーマ、せっかく作ったのだから配布でもしようと思ってた（当時）のだけど、不具合とかでたら悪いよなーと、そのまましていたのです。

これからは、無料で高機能なテーマもあるので、それをちょっとお直しする感じでもいいかなと。
とはいえ、どこをお直しすればいいのか、すぐに判るという点はやっぱりメリットだったかも。

CSSでfont-sizeを100%と書くと、ブラウザでは16pxで表示されます。
以下のfont-sizeはブラウザで同じサイズです。

　100% = 1em = 1rem = 16px = 12pt

絶対値とか相対値とかあるのですが、長くなるので今回は割愛します。
簡単に書くと、レスポンシブデザインの時に面倒がなく効率がいいのが「rem」です。（ざっくりしすぎた説明ですみません。）

「rem」を使う場合、「1rem」だと基本「16px」なのですが、
このままだと、「18pxだと何rem？」という事になり判りにくい。

ですので、CSSの最初に以下のように書きます。

この

という謎のパーセントですが、62.5%がちょうど、「1rem」「10px」になるパーセント。
「1.2rem」と書けば「12px」、「1.6rem」と書けば「16px」になる訳です。

だから、サイト全体のfont-sizeを16pxにした時は

と書きます。

これだと、書きやすいよね！

とはいえ、以前作ったサイトを見ると、「px」とか「％」なんかをバリバリ使っていて、それ程不具合がある訳でもなく。
というか、以前はIE8で「rem」を使えなくて、px指定も同時にしたような気もしますし…。私としては、あれはついこないだの様に思えるんですが…。基本IEのせいですね。

CSS3も定着したし、レスポンシブサイトになってから、考えたり調整する事も増えたし「rem」で統一した方が早いって事で、定着し今に至る。って事なのでしょう。

参考サイト：
｛font-size:62.5％｝が62.5％になったワケ
CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分

やり方は簡単。
１．FTPソフトで、WordPressディレクトリ内「wp-content」の「plugins」ディレクトリに行きます。

２．更新の日付などをたよりに、トラブル元と思われるプラグインのディレクトリに「_（アンダーバー）」を入れ、ログインページを更新。駄目なら次のプラグインも…。と繰り返します。

３．ログイン画面がでたら、そのプラグインがビンゴ！です。
今度は、ビンゴのプラグイン以外のアンダーバーを、一つ一つ取っていってください。（トラブル元が複数である場合もありますよ。）

ここでは、「_auto-post-thumbnaill」が原因でした。

今まで、放置していたブログを久々にメンテして、プラグインを更新したら、真っ白！
久々なのでビックリしました。思い出すと、以前はよくあり頻繁にやっていた作業だったのに、人って、結構忘れるものですね。

空白を指定する「padding」、枠線を指定する「border」のCSS。
これらはよく使うのだけど。
テキストフォーム等でこの指定をすると、場合により、はみ出てしまう。

例えばこんな感じ。

HTML

CSS

テキストフォームのみはみ出ている。
これは、borderの枠2px、paddingの左10pxと右10pxの部分がはみ出しているから。

こんな時は

をCSSに追加するとよい。
CSS3から使えるようになったスタイルで、「padding」と「border」を含んだ幅（width）と高さ（height）になる。

CSS

今まで、divなどのレイアウトでは、paddingやborderを計算してボックスを作っていたけど、これを使うとかなり便利。
面倒な計算しなくてもいいんですよ。

IE7以前ではサポートされないので、古い環境を想定したサイトでは使えないけど。
もうそろそろ、IE7も無くなるだろう…というか、なくなって欲しいです。

WordPressであらかじめ用意されたコメントフォームの文章や内容をカスタマイズする方法をメモ。

そのまま

と書くと以下のようになっていた。

コメント欄のタグは使えないようにしているので、使えるタグ〜の文章は表示されていない。

やってみたのは
ひとつは、 add_filter（フィルターフック）を使ってfunctions.phpで変更する方法。
もうひとつは、$argsを使ってcomments.phpで変更する方法。

１．functions.phpで変更
２．comments.phpで変更

functions.phpに以下のように書く。

functions.php

適当に変えていますが、メールアドレスは必須ですが公開はされません、タグは使えませんを消して、

functions.php

のみにしてしまえば、何も表示されないという訳。

対応する内容は
title_reply　コメントフォームタイトル
title_reply_before　タイトルのタグ
title_reply_after　タイトルの閉じタグ
comment_notes_before　メールについての注意（メールアドレスが公開されることはありません。 * が付いている欄は必須項目です　のところ）
comment_notes_after　タグについての注意（次のHTMLタグと属性が使えます　のところ）
label_submit　送信ボタン

詳しくは以下
Function Reference/comment form « WordPress Codex

他にもメールアドレス欄、サイトアドレス欄も消したりできる。
コメントフォームのタイトルや注訳を変えるだけなら、add_filterでもよいと思う。

これは直接、comments.phpに書いて変更する。

comments.php

もっと他の部分を変更したい場合、以下のサイトが参考になります。
この２つの書き方についても判りやすく載っています。

WordPress：コメントフォームをカスタマイズする方法 | NxWorld

ちなみに、functions.php、comments.php両方に書いてみたら、comments.phpが優先されていました。

今回つまづいたところ

コメントフォームのタイトルのタグ

も変更したくて、それにあたる

‘title_reply_before’
‘title_reply_after’

を書いても変更されなくて悩んでいたのけど、
WordPressを最新バージョンにしたらあっさり反映されて、拍子抜け。
バージョン大切ですね。

という事で、
コメントフォームのカスタマイズは、functions.phpに書けばコメントのテーマがスッキリするけど、後でちょいちょい直すならcomments.phpだろうし、好みの問題かな。

その他の参考サイト：
【WordPress】 コメント欄のHTMLタグについての表記を消す
コメント欄からメールアドレスとウェブURLとタグの案内テキストを非表示にする | hacknote
WordPress コメント入力欄をカスタマイズしてウェブサイト(URL)やメールアドレスを簡単に消す方法 | debate
WordPressのコメント欄をカスタマイズする | hacknote

調べると、以下のサイトにそのままズバリで書かれていた。

参考サイト：
WordPressのカテゴリー一覧（the_category）をカテゴリー別に色分けする | webOpixel

私の場合は、cat slug-カテゴリースラッグ名という形にしたかったので、以下のように書いた。

functions.php

後は、CSSの方で
a.slug-カテゴリースラッグ名
の指定をしてあげれば、カテゴリー別に表示を変える事ができた。
詳しい内容については、上記のサイトに記載されているのでどうぞ。

その他の参考サイト：
WordPressで記事のカテゴリーを取得する | Webデザイン | いいなもっと.com

このままだと、コメント・トラックバック・ピンバックが一緒に表示されてしまう。

この表示を分けて書き出す方法をメモ。

通常のテーマだと、コメントを表示している部分（書かれたコメントやコメントフォーム）は、comments.phpののテーマファイルにまとめられている。

そして、comments.phpを、投稿ページのsingle.phpのコメントを表示させたい箇所で呼び出して表示するようになっている。

１．single.phpを修正

まずは、single.phpを修正する。
通常の呼び出しの記述は以下の通り。

single.php

このままだとコメント・トラックバック・ピンバックを別表示できない。
以下のように変更する。

single.php

trueの部分が、コメントタイプのコメントを分離するかどうかを指定している。詳しくは以下をどうぞ。
インクルードタグ/comments template – WordPress Codex 日本語版

２．comments.phpを修正

あとは、comments.php側の修正。

comments.php

をコメントのみ表示したい場合、

comments.php

type=commentの記述を変更する事で、各表示が可能になる。

type=comment　コメントのみ表示
type=trackback　トラックバック
type=pingback　ピンバック
type=pings　トラックバックとピンバック

コメント、トラックバック、ピンバックという順にしたいのなら以下の通り。

comments.php

参考サイト：
WordPress 「wp_list_comment」 コメント、トラックバック、ピンバックの扱いに関すること | ROKU
WordPress コメントの表示に関するメモ | Web Design Leaves

これで、コメント、トラックバック、ピンバックが別れて表示できるので、スッキリ。
トラックバックとピンバックはそのままでも、コメントは別にしたいって事が多いので、覚えて置くと便利かも。

IFTTTは様々なSNSやDropboxなどのツールを「もし…だったら…する」という風に連携させられる、便利なサービス。

今回の内容としては、複数管理しているfacebookページの一つにブログが更新されるとのRSSをリンク表示させたい（というレシピを作る）、という事なのだけど。

内容としては、レシピを作る前にfacebookページの切替を行えばOK。

１．IFTTTにログイン後、Channelsの文字をクリック。

２．検索するか、スクロールするかしてfacebookページのアイコンを表示し、クリック。

３．Reconnect Channelをクリック。

４．表示したいfacebookページ（ここでは「にくろむめも」）を選択し、Updateをクリック。

５．Page nameが変更したfacebookページ名になっていたら完了。

この後。My Recipesから、連携するレシピを作成できます。

私は主にfacebookページなどでしか利用していたのだけど。
IFTTTはこの他にもtwitterや他のSNS、メールなどと組み合わせて色々な作業を自動化してくれるので、使い方によってはかなり便利なツール。

この他にもお勧めのレシピを探せば、沢山でてくるので、試してみるのもいいかも。