【AFFINGER3】カスタマイズ一覧（備忘録）２

2018/03/22 2020/06/05 PC・NET 閲覧時間: 約 2分17秒

前回の【AFFINGER3】カスタマイズ一覧（備忘録）から2年近く放置していましたが、また最近手を入れたので、備忘録に追加です。

変更内容
手順覚え書き
- カテゴリーの追加手順
設定内容覚え書き
- 月別表示（アーカイブ）
  - 設置
  - PCとモバイルで表示方法を分ける

変更内容

カテゴリーに「バイク」「ボディメイク」など追加＆メニュー等に反映
カテゴリー「バイク」を3階層に設定
関連記事の画像を適切な大きさに変更
メニューバーを3階層アコーディオン表示
サイドバーカテゴリー表示を3階層表示
サイドバーカテゴリー各項目に投稿件数の表示
月別表示（アーカイブ）を設置　→　PCとモバイルで表示方法を分ける
月別表示（アーカイブ）で各月ごとに投稿件数を表示

備忘録とはいっても、ざっくり何をしたか、程度の覚え書きです。

どのファイルのどこをどのように変更・追加したか、とか細かいことまでは書くのが面倒でやってられません。なので後で手を入れるときは結局また一通りチェックしないと・・・特にCSSなんかの内容は全く覚えていないので、ほんとめんどくさい。

でも今回は、いくつかポイントになる部分だけメモっておきます。

なお、ここに書いてある内容は自分の環境に特化したものなので、参考にする場合はその点ご注意ください。

手順覚え書き

カテゴリーの追加手順

WordPressサイドメニュー[投稿]→[カテゴリー]から新規カテゴリーを追加する
[外観]→[メニュー]で、１で追加したカテゴリーを任意の場所へ挿入する

[外観]→[ウィジェット]のサイドバーウィジェットにある「PHPコード：カテゴリー」を編集する

<?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>';
?>

<?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-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に追加したカテゴリーに関する色分け表示のコード追加

/***** カテゴリ色分け *****/
/* 基本 */
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;
}

/***** カテゴリ色分け *****/

/* 基本 */

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;

}

記事を投稿する際、記事のタグに、追加したカテゴリーのスラッグ名を入れる（タグに入れたスラッグ名で色分けの判断をしているため）

設定内容覚え書き

月別表示（アーカイブ）

設置

下記記事参考

テックノート

WordPressで年別月別のアーカイブをアコーディオンで表示する方法

http://javatechnology.net/wordpress/archive-list-accordion/

当ブログのサイドバーに表示している「月別アーカイブ」のように、年別で表示してその中に月別アーカイブを表示する方…

※Javascriptはbase.js最下部に追加

※CSSはAFFINGER3の子テーマstyle.css最下部に追加

※HTMLを吐き出すPHPは、PCとモバイルで表示方法を変えたいので次項参照

PCとモバイルで表示方法を分ける

モバイルだとアコーディオン動作ができなかったので、モバイルからの閲覧時はドロップダウンリストになるよう、分岐するコードも含めてサイドバーウィジェットに直接記述した。

[外観]→[ウィジェット]のサイドバーウィジェットに、下記PHPコードを登録。

<?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; ?>

<?php if ( wp_is_mobile() ) : ?>

<ul>

<?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?>

</select>

<?php else: ?>

<?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 } ?>

<?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()で判断して切り替えている。