Lightningのページタイトルのカスタマイズ

この記事を読むのに必要な時間は約 7 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

WordPress無料テーマのLightningのページタイトルのカスタマイズ事例を紹介します。タイトルの前にアイコンを付加したり、タイトルの上にアイキャッチ画像を表示したり、タイトルの背景色や背景画像などを変更してみます。参考にしてください。
 

目 次

ページタイトルの上にアイキャッチ画像を表示する

標準のページタイトル
上記画像は、標準のまま表示した状態のキャプチャー画像です。
ページタイトルの上に何らかの画像を表示したいこともあります。ここでは、アイキャッチ画像を表示する方法を紹介します。
ページタイトルの上にアイキャッチ画像
上記のような感じのイメージです。
これをカスタマイズするのは、functions.phpとstyle.cssで編集します。
まず、functions.phpの追記から・・・

 


functions.phpを編集するときは画面が真っ白になることを想定して必ずFTPツールを使うようにしてください。「外観」-「テーマの編集」メニューで編集するのは危険です。

これでページタイトルの上にアイキャッチ画像が表示されるようになりますが、画像を画面幅いっぱいに広げるため、下記のようなCSSを子テーマのstyle.cssまたは「VK ExUnit」‐「CSSカスタマイズ」メニューなどに入力します。

画像の高さを200pxと指定していますがここはサイトに合わせて変更してください。
画像を画面幅いっぱいに表示しているので、オリジナルのアイキャッチ画像サイズによっては引き伸ばされて見える場合があります。横幅は、1900pxあるとキレイに表示されるようになってます。

全ページ同じ画像を表示する場合

アイキャッチ画像ではなく全ページ同じ画像を表示する場合は、上記のfunctions.phpに入力したコードを次のように変更します。固定ページ表示や投稿記事などLightningの場合は、何も表示されないのでヘッダー画像の代りになりますね。

変更した部分は、4行目の画像指定の部分です。こちらフルパスで入力しておくとすべて同じ画像で表示されます。

ページタイトルにアイコンを付加する

ページタイトルの先頭にフォントアイコンを入れる
ページタイトルの前にアイコンを表示する方法を紹介します。
固定ページでは、2通りあります。
1つは、超簡単です。
フォントアイコン
このように固定ページのページタイトルに挿入する方法
もう1つは、スタイルシートで全ページ同じフォントアイコンを指定する方法は、下記のようなCSSを子テーマのstyle.cssまたは「VK ExUnit」‐「CSSカスタマイズ」メニューに追加してください。

この方法では、投稿記事の先頭にも同じフォントアイコンが+(プラス)されます。
条件に合わせて変更できるとカッコいいかもしれませんが、PHPなどで指定するとなると初心者の方には、敷居が高いかもしれません。

ページタイトルのスタイルを変更する

標準のページタイトル
ページタイトルの色は「外観」-「カスタマイズ」メニューの「キーカラー」で変更できますが、サイト全体の色が変わってしまいます。その場合、CSSをカスタマイズすれば、ページタイトルの色だけを変更したり背景に画像を敷いたりすることができます。
ページタイトルの背景画像

初期設定のままの場合は、ブルーですが紺色に変更してみました。
次に背景画像を敷きたい場合は・・・

なお、この方法で背景画像を設定した場合はページ保存してもその画像だけは保存されません。つまりパクれません。
スタイルシートで指定した画像は、保存しても含まれないようになっています。
これを取るには、相当スキルないと厳しいかもですね。

カスタマイズする場合の注意点

PHPファイル編集時の文字コード問題

文字コード
functions.phpをはじめphpファイルをカスタマイズする場合によくあるミスは、文字コードが違うという場合です。WordPressの文字コードは、ご存知の方も多いですが、UTF-8です。
しかし、FFFTPなどでダウンロードした場合などちゃんと設定してないとShift-JISに変更されている場合があるのです。
また、この編集にメモ帳を使ってはいけません。
Windowsの方は、Terapadでの編集を推奨します。
理由は、先述の文字コードの問題でメモ帳では、Shift-JISで編集します。Terapadでは文字コードをUTF-8で編集できるからという理由ですね。

テーマ編集からPHPファイルの編集すると危険?

テーマの編集


functions.phpを編集するときは画面が真っ白になることを想定して必ずFTPツールを使うようにしてください。「外観」-「テーマの編集」メニューで編集するのは危険です。

サーバーによっては、変更に失敗することもあります。
テーマファイルは、FTPでパソコンにダウンロードして編集したものをアップロードすることをオススメします。

Terapadとは?

Terapad

TeraPad(テラパッド)は、Windowsで動作するSDIタイプのテキストエディターである。
その名称は作者の寺尾進に由来する。 なお、名称が似ているTera Termとは一切の関係は無い。
本ソフトウェアは、日本語圏では長年に亘って親しまれており、テキストエディターという有名な古参が多いカテゴリにありながらも専門に扱われた書籍も存在する。
出典 WiKiペディア

Terapadは、機能拡張できるプラグインなども用意されていたりしてWindowsユーザーには、非常に便利なソフトになってます。くまはちLABでも愛用させていただいております。

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
くじらモバイル登録
LINE@友だち追加

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!