久しぶりにこのサイトのテンプレートをいぢりました。
といっても、Wordpressデフォルトテーマの「Twenty Sixteen」を親テーマにして子テーマを作成、カスタマイズしただけです。
なので見た目はほとんど「Twenty Sixteen」のままです。誰も気づかないようなトコロのレイアウトを変えたりはしてますが（下記にリストアップしました）。もうブログ用のテーマってレイアウトパターンが決まってるので、大枠はいじりようがないというか…。
「TwentyTen」の頃はまだ中途半端だった子テーマの機能ですが、去年出た「Twenty Fifteen」あたりから、「これを元に子テーマ作ってカスタマイズしてくれや」といわんばかりの記述になっていて、だいぶやりやすくなりました。
テンプレート記述に関する関数とWP設定に関する関数を分けてくれてる、ってことと、関数のオーバーライドができるようになってますね。
今回なぜ改修したかというと、そもそもスマホの表示がおかしかったのを3～4年放置しててですね(;´Д`)
まあこんなの誰も気づかないだろと思ってたら、ついにツイッターで「見れない～」と報告頂いたので、やっと重い腰をあげて修正しました(;´Д`)
以前はPHPでUserAgentを判別してテーマを切り替えていたんですけど、それをやめました。これが見れなかった主な原因です。
やっとレスポンシブになりました。そもそも「Twenty Sixteen」自体がレスポンシブだからね。PCで見てる方はウィンドウサイズを変えたりしてみるといいです。
それに伴い、スマホで見やすいようなレイアウトの修正をしたりとか、今回のカスタマイズは主にスマホ向けです。もうね、アクセスの3～4割がスマホおよびタブレットからなのですよ。検索からのアクセスなんてスマホからが半数近い。
記事を投稿したらTwitterにツイートされるんですけど、そのTwitterがいかにスマホで見られているかということでもあるなあと。
つかなんで今までPHPでテーマ切り替えなんて面倒なことをしていたかというと、当時（前回テーマを改修した5年前）レスポンシブは表示・動作が重すぎたことと、広告バナーがレスポンシブに対応しておらず崩れが発生することがあった、という理由からです。AdsenceとかAmazonはレスポンシブ用バナーがあるので、もうそうする理由がなくなった。
今回の改修で、結構いろんなプラグインとお別れしたよ。ちょっと軽くなったかなと思ったけど差はなかった。レスポンシブはその分CSSがな…(;´Д`)
あとついでにロゴを少し変えました。
ここもずーーーーっと気になっていたところなんだけど、面倒で放置してました。
ロゴは昔名刺を作った時のものを流用していたんですが、線が細いのと「a」が変なのがずっと気になってて。
だいぶマシになったんじゃないかと。
今回のテーマで画像を使っている箇所はなんとロゴだけです。いやあシンプルになったなあ…
カスタムしている箇所
言われなければ誰も気づかないレベル。俺用メモ的な。
- 全体のフォント変更
- アーカイブ一覧の時、記事抜粋を表示（検索結果と同じ表示）
- HOME、アーカイブ、検索結果でそれぞれ表示件数を変更
- 記事抜粋表示の時、「続きを読む」のリンクを、本文抜粋の時以外でも強制的に表示
- 「続きを読む」をテキストリンクではなくボタンの形に。（スマホで押しにくいから）
- 記事抜粋が本文から抜粋される時の文字数を増量
- 記事のメタ情報（日付とかカテゴリー名とか）にアイコンを設定
- 記事のメタ情報に著者名を表示しない
- スマホのとき、記事のメタ情報の位置を本文下部からタイトルの下へ
- 記事個別ページの「次の記事」「前の記事」ナビゲーションのデザインを他ページと統一
- スマホのとき、ウィジェットの表示を減らす
- サイドバーウィジェットのタイトルをキャピタライズ
- サイト名のデフォルトをテキストからロゴ画像に変更（※1）
- スマホの時の上部メニューボタンをメニュー文言からアイコンに変更
- サイトアイコンを設定してても32pxまでは自作のFaviconを使うよう変更
- タイトルタグ書き換え:descriptionを消す（これについての記事）
- コメントフォームのデザイン変更（コンパクトに表示するためプレースホルダーを設定）
- JetPackの書き出すメタタグ「og:image」の画像を、JetpackのNull画像でもサイトアイコンでもなく、自作のog:image専用画像に変更
- Jetpackの関連記事のデザインを変更
- 記事終わりに広告を表示
- 記事内のスタイル変更
- テーブルの見た目
- PC表示のとき、リスト・引用で、マークのグリッドがずれるのを修正
- 画像にリンクをかけるとブロック要素になるのをインライン要素にする。
- 画像にキャプションがついているとき、キャプション文の前にアイコンを設定
- システム関連カスタム（俺だけが便利になるカスタマイズ）
- テキストエディタで書けるタグを増やす
- ビジュアルエディタの見た目を実際の見た目にする（editor-style.cssの設定）
- メディアライブラリの一覧表示のとき、キャプション等表示するかどうかのチェックボックス追加
- 投稿一覧画面のクイック編集で編集できる項目を追加、タグ項目を削除
- 未公開記事の下書きを編集した際、日付を最終更新日に変更しない
- ※1 外観のカスタマイズにロゴ画像の項目を追加
このサイトで使っているプラグイン
- AddQuicktag
https://wordpress.org/plugins/addquicktag/
投稿画面に登録したタグを1発挿入できるボタンをつける。 - Admin Post Navigation
https://wordpress.org/plugins/admin-post-navigation/
投稿画面に「次へ」「前へ」のリンクをつけてくれる。 - AdRotate
https://wordpress.org/plugins/adrotate/
広告管理プラグイン - Akismet
https://wordpress.org/plugins/akismet/
スパムフィルター - Amazon Showcase
https://wordpress.org/plugins/amazon-showcase-wordpress-widget/
「買うやつ買ったやつ」で表示してるAmazonのウィジェットプラグイン。ローテーション機能とかあるけど使ってない。全然更新されないので自分でカスタムしてメンテしてる。 - AmazonJS
https://wordpress.org/plugins/amazonjs/
記事内にAmazonの商品写真とかリンクとか価格情報とか色々ひっぱってきて追加する。書き出されるタグが気に入らないので、色々と自分でカスタマイズしてる。Amazon関係のWPプラグインはすぐに更新されなくなって使えなくなるからなぁ… - Crayon Syntax Highlighter
https://wordpress.org/plugins/crayon-syntax-highlighter/
ソースコードをカラーリングして表示するやつ。重い。使ってるエンキューテーマはもちろん自作。 - Jetpack by WordPress.com
https://wordpress.org/plugins/jetpack/
Wordpressの基本機能にない機能をいろいろ追加するやつ。 - Responsive Lightbox
https://wordpress.org/plugins/responsive-lightbox/
画像の拡大表示にオーバーレイで表示する例のやつ。使うスクリプトはいくつか選べる。 - Revision Control
https://wordpress.org/plugins/revision-control/
リビジョンの保存件数を設定したり、リビジョンを無効にしたりする。 - TinyMCE Advanced
https://wordpress.org/plugins/tinymce-advanced/
ビジュアルエディタの機能ふやす - WP-dTree
https://wordpress.org/plugins/wp-dtree-30/
Archivesで使ってるツリー表示のプラグイン。アーカイブだけでなくカテゴリーとかでも使える。 - ネタバレ防止プラグイン
自作のプラグイン。アニメの感想とかで使ってる、ネタバレ部分の表示を畳んでおくやつ。
こういうの↓- 以下ネタバレ
- ここにネタバレ内容をかく
たいしたことはしていなくて、テーマから該当のjQuery記述を切り離すためにプラグイン化してるだけ。
自分専用のため、投稿に記述するときはdlタグでコーディングしないとダメという大変ゆるい仕様。
もっと入力フォームをつけたりして自動コーディングさせる方法もあるんだけど、自分で使う分には直接コーディングしたほうがよっぽど分かりやすいので。