※追記
現在このブログのテーマはアフィンガー4とは別のテーマに変更しています。
この記事の情報も一部古くなっている箇所もありますのでご了承ください。
ワードプレスのテーマを、これまで使っていたハミングバードからアフィンガー4に変更してみました。
アフィンガー4は、カスタマイズを前提に設計されている自由度の高いテーマ。アフィンガー4に変更しただけの状態では、シンプルすぎてちょっと寂しいデザインです。
なのでいろいろ設定を変更しないといけないのですが、設定箇所が多いので、備忘録として変更したところを記録しておきます。あくまで自分のための備忘録なので分かりにくい箇所もあると思いますが、参考にしてみてください。これからも変更があれば随時更新していきます。
AFFINGER4管理の設定
サイト全体の設定
「オリジナルテーマカスタマイザーを使用する」を有効にする。
サイト全体のレイアウト一括設定
PC閲覧時のサイトの幅（width※デフォルトは1060px）を1160pxに変更
ヘッダー設定
「TOPページのh1タグをサイト名に変更する」を有効に。
ヘッダー（及びフッター）にキャッチフレーズを表示しない。
トップページの設定
●記事一覧
トップページのサイドバーの新着記事一覧を非表示にする。
下層ページのサイドバーの新着記事一覧を非表示にする。
投稿・固定記事設定
アイキャッチ画像を記事上部に表示する。
記事一覧・関連記事一覧などにカテゴリを表示する。
更新日がある場合も投稿日を表示する（記事タイトル下※一覧を除く）。
h3タグにチェックマークを一括適応する。
PC閲覧時に記事下のアドセンス広告を横並びにする。
メニュー設定
●スマホ用アコーディオンメニュー
スマートフォンメニューを表示しないにチェック
カスタマイズ画面
記事エリア背景色→周りのボーダーを「#d8d8d8」に。
ロゴ画像を設定。
基本エリア設定でヘッダーの背景色「#019CD0」を指定。
AdsenseManagerの設定の移行
ハミングバードでは記事中にアドセンス広告を挿入するのにAdsenseManagerというプラグインを使っていたが、アフィンガー4とは相性が悪いようで、テーマを変更しようとするとAdsenseManagerが原因となるエラーが表示される。
そのためプラグインを停止。アフィンガー4ではAdsenseManagerを使わないことに。過去の投稿にはアドセンスマネージャーのショートコード（「ad」）が記入されているので、これをそのまま活用できるように、自分で「ad」というショートコードを作ることに。（ショートコードの囲みカッコは実際は[]）
「function.php」の一番下に
function adFunc() {
return 'アドセンスのコード';
}
add_shortcode('ad', 'adFunc');
を追記。これで過去の投稿のショートコードがアドセンス広告として表示される。
ハミングバードのショートコードをアフィンガー4用に変換
ハミングバードとアフィンガー4のショートコード。機能は同じだけどコードが異なるという場合があるので、ハミングバードのショートコードをアフィンガー4で使えるように変換する。
たとえば関連記事のショートコードは、ハミングバードでは「kanren postid=”記事番号”」という形式。アフィンガーでは「st-card id=記事番号」という形式。
これをSearch Regexというプラグインを使い一括置換する。具体的には「kanren postid」を「st-card id」に置換。
吹き出しなどのショートコードもチェックする。
記事ページのアイキャッチ画像の設定変更
記事ページのアイキャッチ画像。デフォルトではタイトルの上に表示されるが、これをハミングバードと同じように記事タイトルの下に表示させたい。
まずは「single-type1.php」の10行目にある
<?php get_template_part( 'st-eyecatch' ); //アイキャッチ画像を挿入 ?>
を80行目あたりにあるタイトル表示タグ
<h1 class="entry-title"><?php the_title(); //タイトル ?></h1>
の下に移動。するとアイキャッチ画像がタイトルの下に表示されるようになるが、デザインが崩れてしまっている。そのためCSSで調整。子テーマのstyle.cssに追記。
まずはPCでの表示設定。
/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
の部分に下記のCSSを追記。
/*-- 個別投稿アイキャッチの表示 --*/
.st-eyecatch
{ width:auto;
max-width: 700px;
margin: 0 auto;
}
.st-eyecatch img
{ width: auto;
text-align:center;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
max-width:等の数値はブログ全体の幅に合わせて調整。
タブレットでの表示も調整するために
@media only screen and (max-width: 960x) {
@media only screen and (min-width: 600px) {{
の部分にも同じCSSを記述。
これだけではなぜかスマホの表示は変わらなかったので、親テーマのstyle.cssから
/*media Queries スマートフォンのみ（600px）以下
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 599px) {
を子テーマのCSSにコピーして、PC等と同じCSSを記述。スマホの「max-width:」は100%に設定した。
※参考サイト https://w2library.com/sitemaker2/
アンカー広告の挿入
「a-header-code.php」にモバイルアンカー広告のコードを記入。
関連コンテンツユニットの挿入
「single-type1.php」の
<aside> <?php st_author(); //著者リンク ?>
の前に、関連コンテンツユニットのコードを記入する。
※参考サイト https://koresiri.com/adsense-kanren/
SNSボタンを記事上部にも表示
記事下にあるSNSボタンを記事上のアイキャッチ画像の下にも表示するようにする。
<?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?>
このコードを「single-type1.php」のアイキャッチの下にもコピー。
