【AFFINGER3】カスタマイズ一覧(備忘録)2
2020/06/05 PC・NET 閲覧時間: 約 2分17秒
前回の【AFFINGER3】カスタマイズ一覧(備忘録)から2年近く放置していましたが、また最近手を入れたので、備忘録に追加です。
変更内容
- カテゴリーに「バイク」「ボディメイク」など追加&メニュー等に反映
- カテゴリー「バイク」を3階層に設定
- 関連記事の画像を適切な大きさに変更
- メニューバーを3階層アコーディオン表示
- サイドバーカテゴリー表示を3階層表示
- サイドバーカテゴリー各項目に投稿件数の表示
- 月別表示(アーカイブ)を設置 → PCとモバイルで表示方法を分ける
- 月別表示(アーカイブ)で各月ごとに投稿件数を表示
備忘録とはいっても、ざっくり何をしたか、程度の覚え書きです。
どのファイルのどこをどのように変更・追加したか、とか細かいことまでは書くのが面倒でやってられません。なので後で手を入れるときは結局また一通りチェックしないと・・・特にCSSなんかの内容は全く覚えていないので、ほんとめんどくさい。
でも今回は、いくつかポイントになる部分だけメモっておきます。
なお、ここに書いてある内容は自分の環境に特化したものなので、参考にする場合はその点ご注意ください。
手順覚え書き
カテゴリーの追加手順
-
WordPressサイドメニュー[投稿]→[カテゴリー]から新規カテゴリーを追加する
-
[外観]→[メニュー]で、1で追加したカテゴリーを任意の場所へ挿入する
-
[外観]→[ウィジェット]のサイドバーウィジェットにある「PHPコード:カテゴリー」を編集する
12345678910111213141516171819202122232425262728293031323334353637383940414243<?php/* アクアリウムの記事数取得 */$aqua_posts = get_category( get_cat_ID("アクアリウム"));/* バイク関連の記事数取得 */$vmax1200_posts = get_category( get_cat_ID("Vmax1200"));$vmax1200_ext_posts = get_category( get_cat_ID("外装系"));$vmax1200_ele_posts = get_category( get_cat_ID("電装系"));/* ボディメイクの記事数取得 */$body_posts = get_category( get_cat_ID("ボディメイク"));/* DIYの記事数取得 */$diy_posts = get_category( get_cat_ID("DIY"));/* 料理の記事数取得 */$cook_posts = get_category( get_cat_ID("料理"));/* PC・NETの記事数取得 */$pcnet_posts = get_category( get_cat_ID("PC・NET"));/* 雑記の記事数取得 */$notes_posts = get_category( get_cat_ID("雑記"));/* カテゴリーと件数表示 */echo '<ul class="ulButton"><li><a href="https://aquacrafter.com/aquarium/"><img src="https://aquacrafter.com/wp-content/uploads/2016/04/aqua_menuicon_36.png">アクアリウム( ' . $aqua_posts->count . ' )</a></li><li><a href="https://aquacrafter.com/motorcycle/"><img src="https://aquacrafter.com/wp-content/uploads/2018/03/motorcycle_menuicon_36.png">バイク</a></li><li><a href="https://aquacrafter.com/motorcycle-vmax1200/"><img src="https://aquacrafter.com/wp-content/uploads/2018/03/cat_spacer.gif"><img src="https://aquacrafter.com/wp-content/uploads/2018/03/cat_spacer.gif">Vmax1200( ' . $vmax1200_posts->count . ' )</a></li><li><a href="https://aquacrafter.com/motorcycle-vmax1200-ext/"><img src="https://aquacrafter.com/wp-content/uploads/2018/03/cat_spacer.gif"><img src="https://aquacrafter.com/wp-content/uploads/2018/03/cat_spacer.gif"><img src="https://aquacrafter.com/wp-content/uploads/2018/03/cat_spacer.gif">外装系( ' . $vmax1200_ext_posts->count . ' )</a></li><li><a href="https://aquacrafter.com/motorcycle-vmax1200-ele/"><img src="https://aquacrafter.com/wp-content/uploads/2018/03/cat_spacer.gif"><img src="https://aquacrafter.com/wp-content/uploads/2018/03/cat_spacer.gif"><img src="https://aquacrafter.com/wp-content/uploads/2018/03/cat_spacer.gif">電装系( ' . $vmax1200_ele_posts->count . ' )</a></li><li><a href="https://aquacrafter.com/bodymake/"><img src="https://aquacrafter.com/wp-content/uploads/2016/06/bodymake_menuicon_36.png" >ボディメイク( ' . $body_posts->count . ' )</a></li><li><a href="https://aquacrafter.com/diy/"><img src="https://aquacrafter.com/wp-content/uploads/2016/04/diy_menuicon_36.png" >DIY( ' . $diy_posts->count . ' )</a></li><li><a href="https://aquacrafter.com/cooking/"><img src="https://aquacrafter.com/wp-content/uploads/2016/04/cooking_menuicon_36.png" >料理( ' . $cook_posts->count . ' )</a></li><li><a href="https://aquacrafter.com/pc-net/"><img src="https://aquacrafter.com/wp-content/uploads/2016/04/pcnet_menuicon_36.png" >PC・NET( ' . $pcnet_posts->count . ' )</a></li><li><a href="https://aquacrafter.com/notes/"><img src="https://aquacrafter.com/wp-content/uploads/2016/05/coffee_menuicon_36.png" >雑記( ' . $notes_posts->count . ' )</a></li></ul>';?>※記事数取得のコードと、実際に表示するコードのセットで編集する
-
[外観]→[テーマ編集]で、style.cssに追加したカテゴリーに関する色分け表示のコード追加
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869/***** カテゴリ色分け *****//* 基本 */span a {font-size: 10px !important;text-decoration: none;border-radius: 3px;margin: 0 3 0 0px;padding: 4px;}/* アクアリウム 瑠璃紺(瑠璃紺) */#aquarium a {color: #ffffff;background: #27477a;}/* バイク -> Vmax1200 臙脂(えんじ)*/#motorcycle-vmax1200 a {color: #ffffff;background: #ad3140;}/* バイク -> Vmax1200 -> 電装系 臙脂(えんじ) */#motorcycle-vmax1200-ele a {color: #ffffff;background: #ad3140;}/* バイク -> Vmax1200 -> 電装系 臙脂(えんじ) */#motorcycle-vmax1200-ext a {color: #ffffff;background: #ad3140;}/* ボディメイク 菫色(すみれいろ) */#bodymake a {color: #ffffff;background: #714C99;}/* DIY 常盤色(ときわいろ) */#diy a {color: #ffffff;background: #007B50;}/* 料理 蜜柑色(みかんいろ) */#cooking a {color: #ffffff;background: #EB8400;}/* PC・NET 抹茶色(まっちゃいろ) */#pc-net a {color: #ffffff;background: #C0BA7F;}/* 雑記 煤竹色(すすたけいろ) */#notes a {color: #ffffff;background: #5d5245;}/* 未分類 象牙色(ぞうげいろ) */#uncategorized a {color: #ffffff;background: #DED2BF;} -
記事を投稿する際、記事のタグに、追加したカテゴリーのスラッグ名を入れる(タグに入れたスラッグ名で色分けの判断をしているため)
設定内容覚え書き
月別表示(アーカイブ)
設置
下記記事参考
※Javascriptはbase.js最下部に追加
※CSSはAFFINGER3の子テーマstyle.css最下部に追加
※HTMLを吐き出すPHPは、PCとモバイルで表示方法を変えたいので次項参照
PCとモバイルで表示方法を分ける
モバイルだとアコーディオン動作ができなかったので、モバイルからの閲覧時はドロップダウンリストになるよう、分岐するコードも含めてサイドバーウィジェットに直接記述した。
[外観]→[ウィジェット]のサイドバーウィジェットに、下記PHPコードを登録。
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 |
<?php if ( wp_is_mobile() ) : ?> <ul> <select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'> <option value=""><?php echo attribute_escape(__('Select Month')); ?></option> <?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?> </select> <?php else: ?> <ul class="accordion"> <?php global $wpdb; $year_prev = null; $months = $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month , YEAR( post_date ) AS year, COUNT( id ) as post_count FROM $wpdb->posts WHERE post_status = 'publish' and post_date <= now( ) and post_type = 'post' GROUP BY month , year ORDER BY post_date DESC"); foreach($months as $month) : $year_current = $month->year; if ($year_current != $year_prev){ if ($year_prev != null){?> </ul></li> <?php } ?> <li><p><span><?php echo $month->year; ?>年</p></span><ul> <?php } ?> <li> <a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>"> <?php echo date("n", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>月 (<?php echo $month->post_count; ?>) </a> </li> <?php $year_prev = $year_current; endforeach; ?> </ul></li></ul> <?php endif; ?> |
wp_is_mobile()で判断して切り替えている。