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

変更前

変更後

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化の修正をするつもりが、ポロポロと色々な直し部分が見つかっている。
仕方ない。地道にちょっとずつやっていくしかないかなー。

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

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

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

当時やりたかった事

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

   みたいな事と、
   他に

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

   みたいな事。

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

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

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

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

メリット

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

デメリット

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

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

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

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

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

やり方は簡単。
１．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のカテゴリー一覧（the_category）をカテゴリー別に色分けする | webOpixel

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

functions.php

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

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

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

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

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

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

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

３．Reconnect Channelをクリック。

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

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

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

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

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