今回はこんなお悩みを解決します。WordPressテーマ、AFFINGER5での投稿ページ内の各パーツ位置の変更方法です。
今回の方法を応用することで、投稿ページ内にある各パーツの位置を変更することが可能です。
（SNSボタンの位置や、投稿記事の下一括ウィジェットの位置、広告の位置など）
応用編として、記事下部SNSボタン位置の変更、記事上部SNSボタン位置の変更、タグカテゴリリンクの位置変更も紹介していますので参考にされてください。
注意
テーマ内を編集しますので必ずバックアップを取った上で編集を行うようにしてください。
目次
AFFINGERの子テーマをカスタマイズ、コメント欄を記事最下部へ
今回編集を行うファイル
- single.php
- single-type1.php
- single-type2.php
今回上記3つのファイルを変更します。
AFFINGER子テーマの初期段階では 外観 >> テーマエディター 内に上記ファイルはありませんので、ファイルを親テーマより子テーマへコピーして、編集が出来るようにします。
注意
親テーマファイルを直接編集されないことをおすすめします。
親テーマファイルを直接編集することをおすすめしない理由と、子テーマへファイルをコピーする方法がわからない方はこちらの記事を参考にされてください。
まずは必ずsingle.phpを編集する事
子テーマフォルダへ上記3つのファイルのコピーが完了が済みましたら、まず子テーマのsingle.phpを編集します。
ここを編集しておかないと、いくら編集を頑張ってもページに反映がされませんので、まず初めに以下のように編集を行います。
外観 >> テーマエディター >> single.phpを選択します。
single.phpの上記下線部分2箇所を以下のように書き換えます。
include(TEMPLATEPATH . '/single-type2.php');
include(TEMPLATEPATH . '/single-type1.php');
⇣
include(STYLESHEETPATH . '/single-type2.php');
include(STYLESHEETPATH . '/single-type1.php');
要するにTEMPLATEPATHと記載されている部分をSTYLESHEETPATHへ書き換えてください。
書き換えた後ファイルを更新ボタンを押します。これで、投稿ページの編集が反映がされるようになりました。
single-type1とsingle-type2を編集してコメント欄の位置を変更
上記の編集を終えましたら、single-type1とsingle-type2を編集し、コメント欄を記事最下部に移動します。
※コメント欄が表示されていない方は、AFFINGER５管理 ＞投稿・固定記事 ＞コメント の【コメント欄・コメントフォームを非表示にする】が非表示になっていないか確認をしてみてください。
まず 外観 >> テーマエディター >> single-type1.php を選択してください。
- 上記画像枠内部分を切り取り<!--ループ終了-->の後に貼り付けます。
- 切り取って貼り付ける部分は<!--関連記事-->から</aside>の前の</div>まで
貼り付けたらファイル更新ボタンを押し、single-type2でも同じように編集をします。
これで、コメント欄は記事最下部に移動しました。自身の投稿ページを確認してみましょう。
ポイント
ページナビは移動しなくて良いという方は、<!--ページナビ--> 以下は切り取り編集せずに、関連記事部分のみ切り取り、貼り付ければOKです
応用編１：記事下部SNSボタン位置の変更
ここからは上記の応用編として、各パーツの位置変更の例を紹介します。
ます記事下部のSNSボタン位置変更です。
テーマ編集ファイルはコメント欄位置変更と同じで、single-type1のファイルを編集していきます。
注意
子テーマのsingle-type1のファイルの編集を行う前は、前述で紹介している single.phpの編集を必ず行なっておいてくださいね。
行なっていないと編集内容は反映されないので注意。
single-type1のファイルの<?php get_template_part( 'sns' ); // ソーシャルボタン読み込み ?>部分を切り取ります。
今回は広告の上部の位置に変更していますので、single-type1のファイルの該当箇所へ貼り付けます。
<?php get_template_part( 'st-ad-on' ); // 広告 ?>の上部に貼り付けました。
これでファイルを更新ボタンを押し完了です。
応用編２：記事上部SNSボタン位置の変更
続いて記事上部のSNSボタン位置の変更です。
まずAFFINGER5管理 ＞ SNS設定 ＞ 投稿ページの上にSNSボタンを表示する にチェックが入っていることを確認してください。
アフィンガーのデフォルトではアイキャッチの上部にSNSボタンが表示される様になっています。これをアイキャッチ下部にSNSボタン位置を変更します。
single-type1のファイルの
<?php if ( isset( $GLOBALS['stdata230'] ) && $GLOBALS['stdata230'] === 'yes' ): ?>
<?php get_template_part( 'sns' ); // ソーシャルボタン読み込み ?>
<?php endif; ?>
こちらの部分を切り取ります。
<div class="entry-content">このコードの上部に貼り付けます。
そしてファイルを更新を押すと、アイキャッチしたへSNSボタン位置が変更されます。
応用編３：タグカテゴリリンク位置の変更
記事下部にあるタグカテゴリリンクの位置を変更します。
single-type1のファイルの
<?php if ( trim( $GLOBALS['stdata277'] ) === '' ): // タグ・カテゴリリンク ?>
<p class="tagst">
<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>
<?php the_tags( '<i class="fa fa-tags"></i>-', ', ' ); ?>
</p>
<?php endif; ?>
こちらのコード部分を切り取ります。
今回はSNSボタンの上に配置したかったので、該当箇所の<?php get_template_part( 'sns' ); // ソーシャルボタン読み込み ?>の上部に貼り付けました。
貼り付けたらファイルを更新ボタンを押し完了です。変更をプレビューしてみましょう。
自身のブログに合ったカスタマイズ行うべし
今回はAFFINGER5の投稿ページ各パーツの位置変更の方法について紹介しました。
今回紹介した編集を応用することで様々なパーツを、投稿ページ内で位置を変更することが可能です。またAFFINGERはデフォルトに備わっている機能でもたくさんのカスタマイズが行えます。
まずはご自身に合ったテーマを選択し、ご自身のブログにあったブログカスタマイズを行って行きましょう。