AFFINGER

【アフィンガー5】コメント欄の位置やSNSボタンの位置を変更する方法

2020年5月3日

アフィンガー、コメント欄の位置を変更する

Papataro

AFFINGER5でコメント欄の位置が関連記事の上にある。なんとか位置を変える方法はないの?SNSボタン位置も変更できれば好きな位置に変更したいんだけど…

今回はこんなお悩みを解決します。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を書き換える

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.php書き換え後

書き換えた後ファイルを更新ボタンを押します。これで、投稿ページの編集が反映がされるようになりました。

 

single-type1とsingle-type2を編集してコメント欄の位置を変更

上記の編集を終えましたら、single-type1とsingle-type2を編集し、コメント欄を記事最下部に移動します。

コメント欄が表示されていない方は、AFFINGER5管理 >投稿・固定記事 >コメント の【コメント欄・コメントフォームを非表示にする】が非表示になっていないか確認をしてみてください。

まず  外観  >>  テーマエディター  >>  single-type1.php  を選択してください。

コメント欄の移動の仕方
  • 上記画像枠内部分を切り取り<!--ループ終了-->の後に貼り付けます。
  • 切り取って貼り付ける部分は<!--関連記事-->から</aside>の前の</div>まで

貼り付けたらファイル更新ボタンを押し、single-type2でも同じように編集をします

これで、コメント欄は記事最下部に移動しました。自身の投稿ページを確認してみましょう。

ポイント

ページナビは移動しなくて良いという方は、<!--ページナビ--> 以下は切り取り編集せずに、関連記事部分のみ切り取り、貼り付ければOKです

意外と簡単に出来るんだね!

応用編1:記事下部SNSボタン位置の変更

記事下SNSボタン位置の変更

ここからは上記の応用編として、各パーツの位置変更の例を紹介します。

ます記事下部SNSボタン位置変更です。

テーマ編集ファイルはコメント欄位置変更と同じで、single-type1のファイルを編集していきます。

 

注意

子テーマのsingle-type1のファイルの編集を行う前は前述で紹介している single.phpの編集を必ず行なっておいてくださいね。

行なっていないと編集内容は反映されないので注意。

 

下部SNSボタンの位置変更該当箇所

single-type1のファイルの<?php get_template_part( 'sns' ); // ソーシャルボタン読み込み ?>部分を切り取ります。

今回は広告の上部の位置に変更していますので、single-type1のファイルの該当箇所へ貼り付けます。

SNSボタン位置変更該当箇所に貼り付け

<?php get_template_part( 'st-ad-on' ); // 広告 ?>の上部に貼り付けました。

これでファイルを更新ボタンを押し完了です。

応用編2:記事上部SNSボタン位置の変更

記事上部SNSボタン位置の変更

続いて記事上部のSNSボタン位置の変更です。

まずAFFINGER5管理 > SNS設定 > 投稿ページの上にSNSボタンを表示する にチェックが入っていることを確認してください。

SNSボタン記事上に配置する設定

アフィンガーのデフォルトではアイキャッチの上部にSNSボタンが表示される様になっています。これをアイキャッチ下部にSNSボタン位置を変更します。

記事上部SNSボタン切り取り箇所

single-type1のファイルの

<?php if ( isset( $GLOBALS['stdata230'] ) && $GLOBALS['stdata230'] === 'yes' ): ?>

<?php get_template_part( 'sns' ); // ソーシャルボタン読み込み ?>

<?php endif; ?>

こちらの部分を切り取ります。

記事上部SNSボタン位置変更コード貼り付け位置

<div class="entry-content">このコードの上部に貼り付けます。

そしてファイルを更新を押すと、アイキャッチしたへSNSボタン位置が変更されます。

応用編3:タグカテゴリリンク位置の変更

タグカテゴリリンクパーツの位置変更

記事下部にあるタグカテゴリリンクの位置を変更します。

タグカテゴリリンク位置変更コード該当箇所

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はデフォルトに備わっている機能でもたくさんのカスタマイズが行えます。

まずはご自身に合ったテーマを選択し、ご自身のブログにあったブログカスタマイズを行って行きましょう。

-AFFINGER
-

© 2020 Papataro Powered by AFFINGER5