【AFFINGER3】カスタマイズ一覧(備忘録)2

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

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

変更内容

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

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

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

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

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

 

手順覚え書き

カテゴリーの追加手順

  1. WordPressサイドメニュー[投稿]→[カテゴリー]から新規カテゴリーを追加する

  2. [外観]→[メニュー]で、1で追加したカテゴリーを任意の場所へ挿入する

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

    ※記事数取得のコードと、実際に表示するコードのセットで編集する

  4. [外観]→[テーマ編集]で、style.cssに追加したカテゴリーに関する色分け表示のコード追加

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

設定内容覚え書き

月別表示(アーカイブ)

設置

下記記事参考

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

 

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

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

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

 

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

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

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

wp_is_mobile()で判断して切り替えている。