【WordPress】cocoonテーマでコメント欄の位置を投稿記事直下に移動する方法

その他
スポンサーリンク

Cocoonテーマをカスタマイズする

Cocoonテーマは『Cocoon設定』からカスタムできるので、テーマファイルを外観→テーマエディターから変更することは以前よりは減ったかもしれません。

ただ、思うがままに変更したい場合もあります。

今回はコメントの位置がデフォルトでは気に入らなかったので、テーマをカスタマイズして位置を変更してみようと思います。

デフォルトではコメントの位置がかなり下の方にあります。これだとあんまりコメント見てもらえないし、質問する人も減ります。

投稿記事直下ぐらいがいいと思っていたので、この位置をCocoonテーマで変更する方法を紹介します。

親テーマ・子テーマの関係を理解する

WordPressの良いところは完成度の高いテーマを容易に自サイトに適応できるところです。
ただし、場合によっては、コメント欄の位置やちょっとした改変を加えたいことがでてきます。
.phpファイル(テーマファイル)を変更すれば思いのままにサイトを改変できます。

一方で、WordPressのテーマは新機能の追加やセキュリティ問題への対応などで、時々アップデートされます。

そうなると、これまで苦労してカスタマイズしてきたサイトがキレイさっぱり最初の状態に書き変わってしまいます。

こんな事態を避けるために、親テーマ・子テーマが存在します。

例えばcocoonテーマの場合、

親テーマに加えて子テーマをインストールすることができます。というか子テーマを必ずインストールしましょう!

外観⇒テーマ

から確認してみてください。

見た目を変更するなら子テーマのstyle.cssをカスタマイズ

子テーマをインストールすると、外観テーマエディターを選択するとCocoon Childのスタイルシートがデフォルトで開きます。ココを編集せよということですね。
このスタイルシート(style.css)の変更は親テーマをアップデートしても変更されません。
つまりCocoonテーマのアップデートが必要でアップデートしても、このスタイルシートがあるのであなたがカスタマイズした見た目はそのままです。

子テーマのインストール時点でテーマディレクトリとテーマファイルは以下になります。

  • スタイルシート(style.css)
  • テーマのための関数(functions.php)
  • amp.css
  • ビジュアルエディターのスタイルシート(editor-style.css)
  • skins
  • javascript.js
  • tmp-user

よく変更しそうなファイルが用意されています。

他のテーマファイルはどうやって変更するのか?

コメントの位置を投稿記事の直下に持ってくるにはどうすればよいでしょうか?

コメントの位置はDocumentRoot/wp-content/themes/cocoon-master/tmp/single-contents.phpで決まっています。

【コメントを表示する場合】という部分以下がコメントを表示するphpプログラムです。

single-contents.php

<?php
/**
* Cocoon WordPress Theme
* @author: yhira
* @link: https://wp-cocoon.com/
* @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
*/
if ( !defined( 'ABSPATH' ) ) exit;

///////////////////////////////////////
// 投稿ページのコンテンツ
///////////////////////////////////////?>
<?php //パンくずリストがメイントップの場合
if (is_single_breadcrumbs_position_main_top()){
get_template_part('tmp/breadcrumbs');
} ?>

<?php //本文テンプレート
get_template_part('tmp/content') ?>

<div class="under-entry-content">
<?php get_template_part('tmp/related-entries'); //関連記事 ?>

<?php //関連記事下の広告表示
if (is_ad_pos_below_related_posts_visible() && is_all_adsenses_visible()){
get_template_part_with_ad_format(get_ad_pos_below_related_posts_format(), 'ad-below-related-posts', is_ad_pos_below_related_posts_label_visible());
}; ?>

<?php //投稿関連記事下ウイジェット
if ( is_active_sidebar( 'below-single-related-entries' ) ): ?>
<?php dynamic_sidebar( 'below-single-related-entries' ); ?>
<?php endif; ?>

<?php get_template_part('tmp/pager-post-navi'); //投稿ナビ ?>

<?php //コメントを表示する場合
if (is_single_comment_visible()) {
comments_template(); //コメントテンプレート
} ?>

<?php //コメントフォーム下ウイジェット
if ( is_active_sidebar( 'below-single-comment-form' ) ): ?>
<?php dynamic_sidebar( 'below-single-comment-form' ); ?>
<?php endif; ?>

</div>

<?php //パンくずリストがメインボトムの場合
if (is_single_breadcrumbs_position_main_bottom()){
get_template_part('tmp/breadcrumbs');
} ?>

<?php //メインカラム追従領域
get_template_part('tmp/main-scroll'); ?>

黄色マーカー部分が関連記事の下に来ているためコメント欄が関連記事の下に表示されてしまいます。

この部分をsingle-contents.phpから取り除き、content.phpの【マルチページ用のページャーリンク】の下に貼り付ければOKです。

ただし何度もいいますが、親テーマでこれを行いません。親テーマはそのままにします。
そのかわり、子テーマが入っているcocoon-child-masterディレクトリ内にtmpディレクトリを作成し、single-contents.phpcontent.phpを親テーマからコピーしてきます。

子テーマ内のsingle-contents.phpcontent.phpを変更します。

WordPressは子テーマに親テーマと同じファイルが存在すると子テーマのファイルを使用します。

ターミナルmkdir /home/kusanagi/[あなたのサイト]/DocumentRoot/wp-content/themes/cocoon-child-master/tmp

 

cp /home/kusanagi/[あなたのサイト]/DocumentRoot/wp-content/themes/cocoon-master/tmp/content.php /home/kusanagi/[あなたのサイト]/DocumentRoot/wp-content/themes/cocoon-child-master/tmp/

 

cp /home/kusanagi/[あなたのサイト]/DocumentRoot/wp-content/themes/cocoon-master/tmp/single-contents.php /home/kusanagi/[あなたのサイト]/DocumentRoot/wp-content/themes/cocoon-child-master/tmp/

/home/kusanagi/[あなたのサイト]/DocumentRoot/ の部分はあなたのwordpressがインストールされているパスです。適宜修正してください。

子テーマsingle-contens.phpcontent.phpを書き換えます。

tmp/single-contens.php

.......省略

<?php //投稿関連記事下ウイジェット
if ( is_active_sidebar( 'below-single-related-entries' ) ): ?>
<?php dynamic_sidebar( 'below-single-related-entries' ); ?>
<?php endif; ?>

<?php get_template_part('tmp/pager-post-navi'); //投稿ナビ ?>

//コメントを表示する場合に相当するこの部分にあった<?php ?>を削除しました

<?php //コメントフォーム下ウイジェット
if ( is_active_sidebar( 'below-single-comment-form' ) ): ?>
<?php dynamic_sidebar( 'below-single-comment-form' ); ?>
<?php endif; ?>

</div>

<?php //パンくずリストがメインボトムの場合
if (is_single_breadcrumbs_position_main_bottom()){
get_template_part('tmp/breadcrumbs');
} ?>

.......省略

tmp/content.php

.......省略

<div class="entry-content cf<?php echo get_additional_entry_content_classes(); ?>" itemprop="mainEntityOfPage">
<?php //記事本文の表示
the_content(); ?>
</div>

<?php //マルチページ用のページャーリンク
get_template_part('tmp/pager-page-links'); ?>

<?php //コメントを表示する場合
if (is_single_comment_visible()) {
comments_template(); //コメントテンプレート
} ?>

<footer class="article-footer entry-footer">

<?php //投稿本文下ウイジェット

.......省略

これで、コメントの位置は投稿記事の直下に移動します。

コメント