ワードプレスで運営するブログテーマ変更の理由
当ブログ(しねんたい)では2012年からTwenty Twelve(twtw)というワードプレス標準添付のテーマを改造して使っていたのだが、2018年11月にライオンメディア(LION Media)というテーマに変更した。ライオンメディア・ダウンロードページ
テーマを変更した一番の理由は最近のテーマの方がモバイル対応がしっかりしてそうだと思ったから。
ライオンメディアは数ある無料テーマの中でもかなり高機能でデフォルトのデザインもきれいで楽そうだったので採用した。
旧テーマからの設定引継ぎが必要
古いtwtwと違ってライオンメディアでは管理画面から多くの項目が簡単に設定できるが、前のテーマでやっていたことを引き継ぐために別途カスタマイズも必要だったので備忘録として書くことにした。
テーマファイルの修正はワードプレス管理画面からもできるようだが、ローカルで修正してその都度FTPで上げた方が安心だと思う。
固定ページをカスタマイズする方法：タグ一覧ページ作成
当ブログはカテゴリー少なめでタグを多用しているので、前のtwtwでは固定ページを独自カスタマイズしてタグ一覧ページを作っていた。
twtwではその独自ファイルを個別ページ作成画面のリストから呼び出すことができたが、ライオンメディアではそれができない（少なくとも僕の技術力では無理）。
だがネットの情報を参考にしてなんとかタグ一覧表示に成功したので手順を記す。
- タグ一覧表示用PHPスクリプトだけを記述したファイルをテーマディレクトリ内に作る。ヘッダやフッタを読み込む部分のクリプトは不要。
- functions.phpに固定ページのショートコードでそのPHPファイルを読み込むための記述を書く。
- 固定ページにショートコードを記述してタグ一覧表示ファイルを読み込むとタグ一覧が表示される。
昔はこのようなケースではプラグインを使って投稿内に直接PHPを書き込んでいたが、セキュリティ上非推奨なので今はショートコードで別ファイルを読み込むのが一般的とのこと。
参考URL1：WP固定ページや投稿内でphpファイルを読み込むショートコード
参考URL2：WordPress－タグ情報取得・表示方法まとめ
functions.phpは子テーマの方に書いた方がいいらしいが、僕は直接親テーマを修正しているのでその辺はよくわからない。
固定ページはあらかじめ問い合わせとランキングのテンプレートが用意されているので、使うことがなければその中身を書き換えても良いかも（試してはいない）。
投稿時に二種類のテンプレートをカテゴリーによって振り分ける方法
当ブログと同時にテーマを変更した別のブログでは、カテゴリーによって二種類の投稿テンプレートを使い分けているのでその振り分けを記述する必要があった。手順は下記の通り。
- single.phpのコピーを二つ作ってひとつはそのままでもうひとつは書式を修正する。仮にsingle-a.phpとsingle-b.phpとする。
- sinngle.phpにはカテゴリーによってどちらかのファイルを読み込むスクリプトだけを書く。
- 問題がなければカテゴリーによってファイルが振り分けられ、ブログ上で異なる書式の投稿が表示される。
ライオンメディアの他に導入を検討したcocoonではこれができなかったので採用を見送った。
参考URL：WordPressで属するカテゴリ毎に個別記事のデザインを変更する
ブログ記事の更新日を表示させる方法
ライオンメディアでは初期設定だと投稿日しか表示されないので、下記サイトを参考にして更新日も表示させるようにカスタマイズした。簡単にできた。
参考URL：LION MEDIAをカスタマイズしてWordPressブログの更新日時を表示させる
ワードプレスのテーマはデフォルトでは更新日が表示されない物が多いが、ブログの更新日表示はいまや常識なのだからもったいぶらずに最初から表示させてほしい。
ライオンメディアで複数カテゴリーを選択する方法
当ブログではそれでもよいのだが別ブログの方で複数カテゴリーを選択する必要があったのでこれはどうにかしたかった。
複数カテゴリー選択は下記サイトに記載されている方法で簡単に実現できた。
参考URL：ライオンブログで記事を複数カテゴリに登録可能にする方法
コメントのメールとURL入力欄を削除する方法
ワードプレスのコメント欄には名前と本文以外にメールとURL入力欄があるが、こんなのがあったら弱小ブログにコメントする人なんかいないと思う。
しかしそれだけでは入力欄自体は表示されたままなので、下記サイトを参考にして入力欄を丸ごと削除した。メールは公開されませんという文章も同時に削除。
参考URL：WordPressでコメント欄の不要な項目を削除したりカスタマイズをする方法
正直なところコメント欄各項目の表示・非表示はワードプレス標準で簡単に選択できるようにすべき。メールを必須にしない選択はできるが、それだけだと入力欄自体は表示されたまま。普通は項目そのものも非表示にしたいと思うはず。
でも最近は言いたいことがあったらブログのコメントよりもツイッターでつぶやく方が主流だし、ブログ側としてもそっちの方が助かるだろう。
今見ている自分のブログ記事の編集画面に飛ぶためのリンクを追加する方法
前のテーマでは表示されている自分のブログ記事の編集画面に飛ぶリンクがログイン中だけ表示されたのだが、ライオンメディアにはそれがない。これはかなり不便なので下記サイトを参考に追加した。
追加方法は下記サイトにあるコードをheader.phpの中に記述する。僕はタグの後ろに入れた。
参考URL：WordPress 表示している投稿の編集画面へ飛ぶリンクを設置する方法
スマホでインフィード広告を表示させるための設定
ライオンメディアは初期設定だとホームや検索結果など記事一覧ページが、PCでもスマホでも「ノーマル(default)」という二列表示のモードに設定されている。
PCはそのままで良いのだがスマホはこのままだとアドセンスのインフィード広告が表示されず空白になってしまう。ちゃんとアドセンス広告を表示させるために下の手順でスマホだけワイドに変更する。
これでアドセンスのインフィード広告が無事スマホでも表示される。
アイコンフォント追加：ヘッダとリストと外部リンク
ライオンメディアでは各所にアイコンフォントが使われているが、デフォルト以外のアイコンフォントを新たに追加することができる。
当サイトで追加したアイコンフォントと用途
- タグ：ヘッダのSNSアイコンに横並びでタグ一覧ページへのリンクを設置。header.phpのソーシャルアイコン表示の記述をコピペして修正。タグアイコンはすでにカテゴリーの横で使われているのだが、同じのを使ってCSSをいじったら表示がおかしくなりそうな気がしたので別のタグアイコンを追加した。
- 外部リンク：これまで外部リンクアイコンは画像で表示させていたが、それだと色の変化などテキストリンクの装飾が反映されなかったのでフォントに変更。
- リストにチェックアイコン付加：ulのリストにチェックマークがつくようにした。icon.cssの記述をcontent.cssのリスト設定の箇所にコピペして若干修正。
フォント追加と表示方法は下記リンクに詳しく書いてあるのでそちらを参照。
参考URL：LION MEDIAのカスタマイズ・「IcoMoon」を編集してWebフォントを追加しよう
リンク先のサイトはとても詳しく追加手順を書いてくれているのだが、ひとつだけわかりにくかったことがあるので追記しておく。
フォントが消えるとツイッターや投稿日を示すカレンダーなどのアイコンなどが全部□になってしまう。
2019年3月17日追記：アイコンフォント追加時の注意もうひとつ
上記参考サイトに書いてあるicomoonというアイコンフォントサイトで、最近自作SVGをフォントリストに追加した。しかし今回なぜか各アイコンフォントの英数字4桁のフォントコードが変更され、ブログ上で表示されるフォントが狂ってしまった。例えばホームアイコンがツイッターアイコンに変わってしまうといった不具合が発生した。
これまで何度も自作SVGをフォントリストに追加したがフォントのコードが変更されたのは今回が初めてだった。フォントコードの変更はどのような条件で起きるのかわからないが、もし変更されてしまったらライオンメディアの場合はicon.cssのコードを手入力で修正しなければならない。さらにcontent.css内のフォント使用箇所も修正。他のテーマでも該当ファイルの修正が必要。
ここから先はライオンメディアとは直接関係ないが、テーマ変更を機に実施したカスタマイズについて書く。
リンクカード（ブログカード）を変更した
これまでリンクカード（ブログカード）表示にはPz-LinkCardという有名プラグインを使っていたが、僕の環境では管理画面で設定したデザインがなぜか反映されず不細工なままなのが不満だった。あとPzはシェア数のデータを収集してるからどんどん重くなりそうな気がした（実際に重くなるのかどうかはわからない）。
テーマを変更しても相変わらずリンクカードのデザイン変更ができなかったので、ネットで見つけたプラグインを使わずにfunctions.phpの記述でリンクカードを表示する方法を採用した。
外部リンクは元々そんなにカード形式にはしていなかったし、SNSシェアもほとんどされないから問題なし。
下のリンクが実際の表示だがかなりシンプル。だがPzLinkCardではデザインが変更できずブサイクだったので、プラグインを一個減らせるならfunction記述式のがいいと思った。
抜粋文があるタイプもあったがうまくリンク先の文章が引用されなかったのでタイトルだけのタイプにした。
参考URL：【wordpress】プラグインなしでおしゃれな内部リンクのブログカードを実装する方法
Authorアイコン画像を表示させる
記事下のAuthor欄やコメント欄に自分のアイコンを表示させるには、gravatarというサービスに画像を登録する（gravatar）。
gravatarにログインするには先にwordpress.comのアカウントを作っておく必要がある。
gravatarにログインできたら画像とメールを登録する。ワードプレスとgravatar画像はメールアドレスで紐づけられるらしいのでどっちにも同じメールを登録する。ワードプレスでの画像表示は瞬間的には反映されずに5分から10分かかるっぽい。
アイキャッチ画像（サムネイル）に外部画像を使う方法
少しでもサーバーの容量を節約するためにアイキャッチ画像（サムネイル）にGoogleフォトなどの外部画像を使いたかった。普通はできないのだがプラグインを使って実現。
アイキャッチに外部画像を表示させるプラグインを二つ試した。興味がある人はプラグインの新規追加で検索してほしい。
- Featured Image by URL：インストール数約800
- Featured Image from URL：インストール数約2万
fromの方がユーザー数が圧倒的に多くビデオも扱えるなど多機能らしいが、僕はbyの方を使うことにした。
理由はfromの方だと当ブログで使っている人気記事表示プラグインのSimple GA Rankingでサムネイルが表示されなかったから。byの方だとちゃんと表示されたのでみなさんにもbyの方をおすすめしたい。
各記事の編集画面にメモ欄を作る
ブログを書いていると各記事にメモを残しておきたいことがかなりある。メモというのは記事で公開する内容じゃなくて自分だけが見るメモ。
例えば執筆時には公開できないが後で追記したい文章などをメモ欄に保存しておくと便利。
当ブログではAdvanced Custom Fields(ACF)というプラグインを使ってカスタムフィールドにメモ用テキストエリアを追加した。
このプラグインはメモ欄以外にもカスタムフィールドにいろんな項目を追加できて、そのデータを記事内の任意の場所に表示することもできる非常に便利なプラグイン。僕の場合は主に別ブログで使い込んでいるのだが、当ブログ（しねんたい）では非公開メモ欄追加のために利用。
使い方はプラグイン新規追加からAdvanced Custom Fieldsを検索後インストールして有効化。詳しい設定方法は割愛するが簡単なのでネットで調べればすぐにわかると思う。
昔はCustom Field Templateという日本製の似たようなプラグインが主流で僕もそれを使っていたが、設定画面がわかりにくいのと最近バージョンアップした際に若干不具合があったのでACFに変えた。
感想まとめ
2012年以来初めて6年ぶりにワードプレスのテーマを変更したが最近の物は簡単設定など便利な機能が増える一方でカスタマイズ自由度が低下していると思った。
自分でCSSやfunctionsやページファイルをいじらない場合は、次にテーマ変更する時に機能やデザインの移行にかなり手間がかかりそう。
ながモニをフォローしょう！
ながモニではマンガ、アニメ、サブカル、テック系の最新情報を配信しています。
