WordPress

ワードプレスのテーマをアフィンガー4に変更。初期カスタマイズの備忘録【随時更新】

アフィンガー4のカスタマイズ

投稿日:2017年9月14日
更新日:

ワードプレスのテーマを、これまで使っていたハミングバードからアフィンガー4に変更してみました。

アフィンガー4は、カスタマイズを前提に設計されている自由度の高いテーマ。アフィンガー4に変更しただけの状態では、シンプルすぎてちょっと寂しいデザインです。

なのでいろいろ設定を変更しないといけないのですが、設定箇所が多いので、備忘録として変更したところを記録しておきます。あくまで自分のための備忘録なので分かりにくい箇所もあると思いますが、参考にしてみてください。これからも変更があれば随時更新していきます。

スポンサードリンク

AFFINGER4管理の設定

サイト全体の設定

「オリジナルテーマカスタマイザーを使用する」を有効にする。

 

サイト全体のレイアウト一括設定

PC閲覧時のサイトの幅(width※デフォルトは1060px)を1160pxに変更

 

ヘッダー設定

「TOPページのh1タグをサイト名に変更する」を有効に。

ヘッダー(及びフッター)にキャッチフレーズを表示しない。

 

トップページの設定

●記事一覧

トップページのサイドバーの新着記事一覧を非表示にする。

下層ページのサイドバーの新着記事一覧を非表示にする。

 

投稿・固定記事設定

アイキャッチ画像を記事上部に表示する。

記事一覧・関連記事一覧などにカテゴリを表示する。

更新日がある場合も投稿日を表示する(記事タイトル下※一覧を除く)。

h3タグにチェックマークを一括適応する。

PC閲覧時に記事下のアドセンス広告を横並びにする。

 

メニュー設定

●スマホ用アコーディオンメニュー

スマートフォンメニューを表示しないにチェック

 

カスタマイズ画面

記事エリア背景色→周りのボーダーを「#d8d8d8」に。

ロゴ画像を設定。

基本エリア設定でヘッダーの背景色「#019CD0」を指定。

 

AdsenseManagerの設定の移行

ハミングバードでは記事中にアドセンス広告を挿入するのにAdsenseManagerというプラグインを使っていたが、アフィンガー4とは相性が悪いようで、テーマを変更しようとするとAdsenseManagerが原因となるエラーが表示される。

そのためプラグインを停止。アフィンガー4ではAdsenseManagerを使わないことに。過去の投稿にはアドセンスマネージャーのショートコード(「ad」)が記入されているので、これをそのまま活用できるように、自分で「ad」というショートコードを作ることに。(ショートコードの囲みカッコは実際は[])

「function.php」の一番下に

を追記。これで過去の投稿のショートコードがアドセンス広告として表示される。

 

ハミングバードのショートコードをアフィンガー4用に変換

ハミングバードとアフィンガー4のショートコード。機能は同じだけどコードが異なるという場合があるので、ハミングバードのショートコードをアフィンガー4で使えるように変換する。

たとえば関連記事のショートコードは、ハミングバードでは「kanren postid="記事番号"」という形式。アフィンガーでは「st-card id=記事番号」という形式。

これをSearch Regexというプラグインを使い一括置換する。具体的には「kanren postid」を「st-card id」に置換。

吹き出しなどのショートコードもチェックする。

 

記事ページのアイキャッチ画像の設定変更

記事ページのアイキャッチ画像。デフォルトではタイトルの上に表示されるが、これをハミングバードと同じように記事タイトルの下に表示させたい。

まずは「single-type1.php」の10行目にある

を80行目あたりにあるタイトル表示タグ

の下に移動。するとアイキャッチ画像がタイトルの下に表示されるようになるが、デザインが崩れてしまっている。そのためCSSで調整。子テーマのstyle.cssに追記。

まずはPCでの表示設定。

の部分に下記のCSSを追記。

max-width:等の数値はブログ全体の幅に合わせて調整。

タブレットでの表示も調整するために

の部分にも同じCSSを記述。

これだけではなぜかスマホの表示は変わらなかったので、親テーマのstyle.cssから

を子テーマのCSSにコピーして、PC等と同じCSSを記述。スマホの「max-width:」は100%に設定した。

※参考サイト https://w2library.com/sitemaker2/

 

アンカー広告の挿入

「a-header-code.php」にモバイルアンカー広告のコードを記入。

 

関連コンテンツユニットの挿入

「single-type1.php」の

の前に、関連コンテンツユニットのコードを記入する。

※参考サイト https://koresiri.com/adsense-kanren/

 

SNSボタンを記事上部にも表示

記事下にあるSNSボタンを記事上のアイキャッチ画像の下にも表示するようにする。

このコードを「single-type1.php」のアイキャッチの下にもコピー。

 

-WordPress

Copyright© くまらぼ , 2017 All Rights Reserved Powered by AFFINGER4.