Lightningでカテゴリーをカスタマイズする
この記事を読むのに必要な時間は約 12 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
WordPressの無料テーマLightningでカテゴリーをちょっとカスタマイズしてみました。
どのバージョンから可能になったのかわかりませんが、カテゴリー表示の背景を変更できるようになっています。
それだけでなくカテゴリーが1個しか表示できなかったものを複数表示できるようにしてみました。
カテゴリーが入れ子になった場合など複数選択して表示したいと思っていたので今回やってみました。
そのやり方を今回説明します。
必要なスキル
今回のカスタマイズに必要なスキルは、コピペできるということとFTPの操作ができることそれと文字コードについての理解があること大きくわけるとこの３つです。
最近ではFTPをあまり使う機会がなくなりましたが、使えるようにしていた方が便利です。
まずは、バックアップをしてない方は、バックアップしてください。
そして子テーマを作成している方はいいのですが、作成してない方は子テーマを作成してください。
FTPソフトの使い方
WordPressをバックアップする方法
子テーマについて
以前は、子テーマをVektor(ベクトル)さんが配布していなかったので プラグインを使って子テーマを作成していました。
今は、配布されていますので下記のリンクよりダウンロードしてください。
自分で作成したい方は、下記のリンクより プラグインを使ってください。
One Click Child Themeテーマのファイルを直接カスタマイズしても可能なのですが、アップデートのたびに元に戻ります。そしてLightningは、筆者が知る WordPressのテーマの中でもかなり頻繁にアップデートされています。その都度やり直していると時間の無駄になります。
カテゴリーの色を変更する
Lightningにカテゴリー表示の背景を変更する機能がつきました。
カテゴリーごとに色分けすることが可能です。
初期設定では、上記画像のようにグレーになっています。
この画像のように色を変更するには？
投稿 → カテゴリーでカテゴリー一覧を開きます。
カテゴリーの中で１つ編集する画面を開きます。
説明の下にcolorがありますね
こちらで色の部分をクリックするとカラーパレットか色コードで変更が可能です。
下記の色コード表を参考にしてください。
カラーコードが一目でわかるWEB色見本
カテゴリーを複数表示させる
カテゴリーを複数表示させるには？
Vektor(ベクトル)さんのサイトでも紹介されていますが・・・
子テーマのフォルダ内に(template-parts/post/)のフォルダを作成してmeta.phpを作成します。
(自分のドメイン/wp-content/themes/子テーマのフォルダ名/)となっています。
これでフォルダの階層がわからないとか場所がわからないという方は、作業しないで詳しい方にお願いすることをおすすめします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/* meta.php */ <?php global $lightning_theme_options; ?> <div class="entry-meta"> <?php if ( get_post_type() != 'product' ) : ?> <span class="published entry-meta_items"><?php echo esc_html( get_the_date() ); ?></span> <?php // Post update $meta_hidden_update = ( isset( $lightning_theme_options['postUpdate_hidden'] ) && $lightning_theme_options['postUpdate_hidden'] ) ? ' entry-meta_hidden' : ''; ?> <span class="entry-meta_items entry-meta_updated<?php echo $meta_hidden_update; ?>">/ <?php _e( 'Last updated', 'lightning-pro' ); ?> : <span class="updated"><?php the_modified_date( '' ); ?></span></span> <?php // Post author // For post type where author does not exist $author = get_the_author(); if ( $author ) { ?> <?php $meta_hidden_author = ( isset( $lightning_theme_options['postAuthor_hidden'] ) && $lightning_theme_options['postAuthor_hidden'] ) ? ' entry-meta_hidden' : ''; ?> <span class="vcard author entry-meta_items entry-meta_items_author<?php echo $meta_hidden_author; ?>"><span class="fn"><?php echo esc_html( $author ); ?></span></span> <?php } // if ( $author ) { ?> <?php endif; // if ( get_post_type() != 'product' ) ?> <?php $taxonomies = get_the_taxonomies(); if ( $taxonomies ) : // get $taxonomy name // $taxonomy = key( $taxonomies ); // To avoid WooCommerce default tax foreach ( $taxonomies as $key => $value ) { if ( $key != 'product_type' ) { $taxonomy = $key; break; } } $terms = get_the_terms( get_the_ID(), $taxonomy ); foreach ( $terms as $key => $term ) { $term_url = esc_url( get_term_link( $term->term_id, $taxonomy ) ); $term_name = esc_html( $term->name ); $term_color = ''; if ( class_exists( 'Vk_term_color' ) ) { $term_color = Vk_term_color::get_term_color( $term->term_id ); $term_color = ( $term_color ) ? ' style="background-color:' . $term_color . ';border:none;"' : ''; } echo '<span class="entry-meta_items entry-meta_items_term"><a href="' . $term_url . '" class="btn btn-xs btn-primary"' . $term_color . '>' . $term_name . '</a></span>'; } // foreach ( $terms as $key => $term ) { endif; ?> </div> |
上記コードをコピペして文字コードUTF-8で保存してください。
文字コードの編集が可能なエディターでファイル作成してください。
また、 スタイルシートでの調整は自分のサイトに合わせて調整してください。
まとめ：作業での注意すべき点
子テーマを編集するということは、失敗するとサイトのデザインが崩れたり表示しなくなったりする可能性があります。
Windowsでファイルを開いたりするとShift-JISなどに文字コードがなる場合もあります。
WordPressでは文字コードがUTF-8が必須になります。
WindowsであればTerapadというテキストエディタがあるといいですね。
メモ帳の場合は、文字コードの設定ができないので使えません。
macOSの場合は、Sublime Textをおすすめしています。
使い方については、Tech ACADEMYさんで紹介されています。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存