ライオンメディア:ワードプレスのテーマ変更時に実施したカスタマイズまとめ

ライオンメディア:ワードプレスのテーマ変更時に実施したカスタマイズまとめ
ライオンメディア:ワードプレスのテーマ変更時に実施したカスタマイズまとめ

ワードプレスで運営するブログテーマ変更の理由

当ブログ(しねんたい)では2012年からTwenty Twelve(twtw)というワードプレス標準添付のテーマを改造して使っていたのだが、2018年11月にライオンメディア(LION Media)というテーマに変更した。ライオンメディア・ダウンロードページ

テーマを変更した一番の理由は最近のテーマの方がモバイル対応がしっかりしてそうだと思ったから。

ライオンメディアは数ある無料テーマの中でもかなり高機能でデフォルトのデザインもきれいで楽そうだったので採用した。

旧テーマからの設定引継ぎが必要

古いtwtwと違ってライオンメディアでは管理画面から多くの項目が簡単に設定できるが、前のテーマでやっていたことを引き継ぐために別途カスタマイズも必要だったので備忘録として書くことにした。

ファイルを修正する場合はバックアップを取るのを忘れずに。特にfunctions.phpはちょっとおかしな記述をすると画面が真っ白になる。そして素人では修復不可能。

テーマファイルの修正はワードプレス管理画面からもできるようだが、ローカルで修正してその都度FTPで上げた方が安心だと思う。

固定ページをカスタマイズする方法:タグ一覧ページ作成

当ブログはカテゴリー少なめでタグを多用しているので、前のtwtwでは固定ページを独自カスタマイズしてタグ一覧ページを作っていた。

twtwではその独自ファイルを個別ページ作成画面のリストから呼び出すことができたが、ライオンメディアではそれができない(少なくとも僕の技術力では無理)。

だがネットの情報を参考にしてなんとかタグ一覧表示に成功したので手順を記す。

  1. タグ一覧表示用PHPスクリプトだけを記述したファイルをテーマディレクトリ内に作る。ヘッダやフッタを読み込む部分のクリプトは不要。
  2. functions.phpに固定ページのショートコードでそのPHPファイルを読み込むための記述を書く。
  3. 固定ページにショートコードを記述してタグ一覧表示ファイルを読み込むとタグ一覧が表示される。

昔はこのようなケースではプラグインを使って投稿内に直接PHPを書き込んでいたが、セキュリティ上非推奨なので今はショートコードで別ファイルを読み込むのが一般的とのこと。

参考URL1:WP固定ページや投稿内でphpファイルを読み込むショートコード
参考URL2:WordPress-タグ情報取得・表示方法まとめ

functions.phpは子テーマの方に書いた方がいいらしいが、僕は直接親テーマを修正しているのでその辺はよくわからない。

固定ページはあらかじめ問い合わせとランキングのテンプレートが用意されているので、使うことがなければその中身を書き換えても良いかも(試してはいない)。

投稿時に二種類のテンプレートをカテゴリーによって振り分ける方法

当ブログと同時にテーマを変更した別のブログでは、カテゴリーによって二種類の投稿テンプレートを使い分けているのでその振り分けを記述する必要があった。手順は下記の通り。

  1. single.phpのコピーを二つ作ってひとつはそのままでもうひとつは書式を修正する。仮にsingle-a.phpとsingle-b.phpとする。
  2. sinngle.phpにはカテゴリーによってどちらかのファイルを読み込むスクリプトだけを書く。
  3. 問題がなければカテゴリーによってファイルが振り分けられ、ブログ上で異なる書式の投稿が表示される。

ライオンメディアの他に導入を検討したcocoonではこれができなかったので採用を見送った。

参考URL:WordPressで属するカテゴリ毎に個別記事のデザインを変更する

ブログ記事の更新日を表示させる方法

ライオンメディアでは初期設定だと投稿日しか表示されないので、下記サイトを参考にして更新日も表示させるようにカスタマイズした。簡単にできた。

参考URL:LION MEDIAをカスタマイズしてWordPressブログの更新日時を表示させる

ワードプレスのテーマはデフォルトでは更新日が表示されない物が多いが、ブログの更新日表示はいまや常識なのだからもったいぶらずに最初から表示させてほしい。

スポンサーリンク

ライオンメディアで複数カテゴリーを選択する方法

ライオンメディアは無料とは思えない素晴らしいテーマなのだがデフォルトではカテゴリーをひとつしか選択できない。

当ブログではそれでもよいのだが別ブログの方で複数カテゴリーを選択する必要があったのでこれはどうにかしたかった。

複数カテゴリー選択は下記サイトに記載されている方法で簡単に実現できた。

参考URL:ライオンブログで記事を複数カテゴリに登録可能にする方法

コメントのメールとURL入力欄を削除する方法

ワードプレスのコメント欄には名前と本文以外にメールとURL入力欄があるが、こんなのがあったら弱小ブログにコメントする人なんかいないと思う。

URLとメール入力欄を削除する前にワードプレス管理画面の設定→ディスカッションからメールと名前の入力を必須にするところのチェックをはずしておく。

しかしそれだけでは入力欄自体は表示されたままなので、下記サイトを参考にして入力欄を丸ごと削除した。メールは公開されませんという文章も同時に削除。

参考URL:WordPressでコメント欄の不要な項目を削除したりカスタマイズをする方法

正直なところコメント欄各項目の表示・非表示はワードプレス標準で簡単に選択できるようにすべき。メールを必須にしない選択はできるが、それだけだと入力欄自体は表示されたまま。普通は項目そのものも非表示にしたいと思うはず。

でも最近は言いたいことがあったらブログのコメントよりもツイッターでつぶやく方が主流だし、ブログ側としてもそっちの方が助かるだろう。

今見ている表示中の自分のブログ記事の編集画面に飛ぶためのリンクを追加する方法

前のテーマでは表示されている自分のブログ記事の編集画面に飛ぶリンクがログイン中だけ表示されたのだが、ライオンメディアにはそれがない。これはかなり不便なので下記サイトを参考に追加した。

追加方法は下記サイトにあるコードをheader.phpの中に記述する。僕はタグの後ろに入れた。

参考URL:WordPress 表示している投稿の編集画面へ飛ぶリンクを設置する方法

スマホでインフィード広告を表示させるための設定

ライオンメディアは初期設定だとホームや検索結果など記事一覧ページが、PCでもスマホでも「ノーマル(default)」という二列表示のモードに設定されている。

PCはそのままで良いのだがスマホはこのままだとアドセンスのインフィード広告が表示されず空白になってしまう。ちゃんとアドセンス広告を表示させるために下の手順でスマホだけワイドに変更する。

ワードプレス左側のメニューから外観カスタマイズ基本設定記事ビューレイアウト設定ノーマル(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シェア数が表示できないことと内部リンクにしか対応していないこと。

外部リンクは元々そんなにカード形式にはしていなかったし、SNSシェアもほとんどされないから問題なし。

下のリンクが実際の表示だがかなりシンプル。だがPzLinkCardではデザインが変更できずブサイクだったので、プラグインを一個減らせるならfunction記述式のがいいと思った。

抜粋文があるタイプもあったがうまくリンク先の文章が引用されなかったのでタイトルだけのタイプにした。

参考URL:【wordpress】プラグインなしでおしゃれな内部リンクのブログカードを実装する方法

Authorアイコン画像を表示させる

記事下のAuthor欄やコメント欄に自分のアイコンを表示させるには、gravatarというサービスに画像を登録する(gravatar)。

gravatarにログインするには先にwordpress.comのアカウントを作っておく必要がある。

海外のアカウント削除情報サイトによるとwordpress.comは一度アカウントを作ると二度と削除できないらしいので神経質な人はやめた方がいいかも。

gravatarにログインできたら画像とメールを登録する。ワードプレスとgravatar画像はメールアドレスで紐づけられるらしいのでどっちにも同じメールを登録する。ワードプレスでの画像表示は瞬間的には反映されずに5分から10分かかるっぽい。

アイキャッチ画像(サムネイル)に外部画像を使う方法

少しでもサーバーの容量を節約するためにアイキャッチ画像(サムネイル)にGoogleフォトなどの外部画像を使いたかった。普通はできないのだがプラグインを使って実現。

アイキャッチに外部画像を表示させるプラグインを二つ試した。興味がある人はプラグインの新規追加で検索してほしい。

  1. Featured Image by URL:インストール数約800
  2. 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やページファイルをいじらない場合は、次にテーマ変更する時に機能やデザインの移行にかなり手間がかかりそう。

Amazonおすすめキャンペーン

Echoを買うと4カ月間音楽6500万曲無料で聴き放題【Amazon Music Unlimited】新規登録者限定:期間不明だが一定数に達すると終了と思われるので急げ!

Echoを買うと4カ月間音楽6500万曲無料で聴き放題【Amazon Music Unlimited】新規登録者限定(期間不明)

対象Echoは種類豊富。Alexa便利なので未体験の人には特に強力推し。一定数に達すると終了だと思われるので急げ!

5カ月目以降は月額Prime780円、非Prime980円。⇒Amazon Music Unlimitedで聴ける曲まとめ⇒欅坂46⇒クラシック⇒アニソン⇒ヤバイTシャツ屋さんなど

今すぐチェック
月額たった980円で10万冊以上が読み放題になる【Kindle Unlimited】30日間の無料体験あり

月額たった980円で10万冊以上が読み放題になる【Kindle Unlimited】30日間の無料体験あり

本1冊と変わらない月額でオールジャンル読み放題

⇒Kindle Unlimitedで読み放題の本一覧、対象はマンガ・小説・ビジネス・実用書・雑誌など多数。万が一自分に合わなければいつでも退会可能。Kindle端末がなくてもスマホやPCの無料アプリで読めます。

今すぐチェック
たった5000円のAmazonギフト券現金チャージで1,000ポイントもらえる!初チャージの人が対象

たった5000円のAmazonギフト券現金チャージで1,000ポイントもらえる!初チャージの人が対象

初チャージ時に1000ポイント、その後もチャージのたびに最大2.5%ポイントがもらえる

手数料なし。チャージした分は全額Amazonで現金同様利用可能。Amazonの買い物にはチャージを使わないと損!

今すぐチェック

ブログとネットカテゴリの最新記事