Lightningでカテゴリーをカスタマイズする

この記事のURLとタイトルをコピーする

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

WordPressの無料テーマLightningでカテゴリーをちょっとカスタマイズしてみました。
どのバージョンから可能になったのかわかりませんが、カテゴリー表示の背景を変更できるようになっています。
それだけでなくカテゴリーが1個しか表示できなかったものを複数表示できるようにしてみました。
カテゴリーが入れ子になった場合など複数選択して表示したいと思っていたので今回やってみました。
そのやり方を今回説明します。

 

目 次

必要なスキル

Lightning
今回のカスタマイズに必要なスキルは、コピペできるということとFTPの操作ができることそれと文字コードについての理解があること大きくわけるとこの3つです。
最近ではFTPをあまり使う機会がなくなりましたが、使えるようにしていた方が便利です。
まずは、バックアップをしてない方は、バックアップしてください。
そして子テーマを作成している方はいいのですが、作成してない方は子テーマを作成してください。

FFFTPFTPソフトの使い方
目 次 FTPとは? FTPソフトとは? FFFTPをインストールする FFFTPに接続するサーバーを設定する FTPとは? ...
WordPressのバックアップWordPressをバックアップする方法
ルートディレクトリにあるすべてのファイルをバックアップすればよかったのですが、WordPressの場合にはそれだけでは不十分なので...

 

子テーマについて

子テーマ作成
以前は、子テーマをVektor(ベクトル)さんが配布していなかったので プラグインを使って子テーマを作成していました。
今は、配布されていますので下記のリンクよりダウンロードしてください。

自分で作成したい方は、下記のリンクより プラグインを使ってください。

子テーマ作成One Click Child Theme
【詳細】 今回は、業者がよくやるテキストエディターとかで記述する方法でなくプラグインを使って初心者でもできる方法をお伝えします...
テーマをカスタマイズする場合に子テーマを使ってカスタマイズすることが推奨されています。
テーマのファイルを直接カスタマイズしても可能なのですが、アップデートのたびに元に戻ります。そしてLightningは、筆者が知る WordPressテーマの中でもかなり頻繁にアップデートされています。その都度やり直していると時間の無駄になります。

 

カテゴリーの色を変更する

カテゴリー背景の初期設定
Lightningにカテゴリー表示の背景を変更する機能がつきました。
カテゴリーごとに色分けすることが可能です。
初期設定では、上記画像のようにグレーになっています。

複数のカテゴリー表示
この画像のように色を変更するには?
投稿 → カテゴリーでカテゴリー一覧を開きます。
カテゴリーの中で1つ編集する画面を開きます。

カテゴリー色の設定
説明の下にcolorがありますね
こちらで色の部分をクリックするとカラーパレットか色コードで変更が可能です。
下記の色コード表を参考にしてください。

カラー見本カラーコードが一目でわかるWEB色見本
WEBカラー見本は、ブラウザで使用できるカラーを16進数で140色表示しております。WEBサイト作成の参考にしてください。 目 次 ...

 

カテゴリーを複数表示させる

複数のカテゴリー表示
カテゴリーを複数表示させるには?
Vektor(ベクトル)さんのサイトでも紹介されていますが・・・

子テーマのフォルダ内に(template-parts/post/)のフォルダを作成してmeta.phpを作成します。
(自分のドメイン/wp-content/themes/子テーマのフォルダ名/)となっています。
これでフォルダの階層がわからないとか場所がわからないという方は、作業しないで詳しい方にお願いすることをおすすめします。

上記コードをコピペして文字コードUTF-8で保存してください。
文字コードの編集が可能なエディターでファイル作成してください。
また、 スタイルシートでの調整は自分のサイトに合わせて調整してください。

 

まとめ:作業での注意すべき点

作業上の注意
子テーマを編集するということは、失敗するとサイトのデザインが崩れたり表示しなくなったりする可能性があります。
 Windowsでファイルを開いたりするとShift-JISなどに文字コードがなる場合もあります。
 WordPressでは文字コードがUTF-8が必須になります。
 WindowsであればTerapadというテキストエディタがあるといいですね。
メモ帳の場合は、文字コードの設定ができないので使えません。
macOSの場合は、Sublime Textをおすすめしています。
使い方については、Tech ACADEMYさんで紹介されています。

 


 

チャンネル登録

 

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

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加

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