XeoryBaseで「続きを読む」を自動的に付加する方法

どうもタスです。

このブログはWordPressの「Xeory Base」というテーマを使用しています。

シンプルでとっても洗練された使い勝手の良いテーマではないかと思っています。

Xeory-無料WordPressテーマ-

Xeoryはコンテンツマーケティングに特化した無料のWordPressテーマです。もちろん内部SEOも最大限まで最適化しているので、このテーマを使って、良質な記事を届けて行けば自然と多くのアクセスを得られるようになっています。

Xeory-無料WordPressテーマ-

この記事の目次

1 何もせず記事を投稿するとトップページが長くなる
2 プラグインではなくコーディングで解決できる
3 なぜプラグインではなくコーディングで対応する？
4 コーディング内容
5 まとめ
6 その他のXeoryBaseカスタマイズ記事

何もせず記事を投稿するとトップページが長くなる

ただ、気になったのが記事を書いてそのまま投稿すると、トップページに記事がそのままの長さで表示されてしまうことです。

それが何記事もあったら、トップページのスクロールが激しくなり過ぎて、見ている読者からするとウンザリしますよね。

そこで、僕は「続きを読むタグ」を挿入していたのですが、これがまたどこに挿入するかで悩むのです。

もちろん、トップページが長くなり過ぎないように、そして、個々の記事が同じくらいの間隔になるようにタグを入れるのですが、記事導入部の文字数によっては上手く行かないこともあり、どうにかならないかなと思っていました。

最終的には、プラグインで上手く調整できそうだと知ったので、その方法を取ろうと考えていました。

プラグインではなくコーディングで解決できる

そう思っていたら、なんと…

プラグインではなく、コーディングで実現できることを知りました！

参考にさせて頂いたサイトはこれです。

WordPress Xeory 記事抜粋「続きを読む」をボタン形式で表示する

データで見る！ ~ サガン鳥栖 ~

この記事と同様の対応を行ったらサクッとできたので、僕の記事でも同様にお知らせしたいと思います。

すないわんさん、ありがとうございました。

大体、本文を100文字くらい抜粋したところで「続きを読む」ボタンが挿入されるので、見た目がとてもキレイになります。

なぜプラグインではなくコーディングで対応する？

プラグイン自体はブラックボックスで、且つ動作が重くなることや表示に不具合が出る可能性があることが指摘されています。

それに対してコーディングは自分で理解しながらコードを触るので、万が一不具合が起こった際もすぐに直せることができますし、基本的に簡潔な対応で終わることが多いです。

プラグインは、不特定多数の方に使用してもらうことを前提に作成しているので、本来行いたいこと以外に付け加えているコーディングなども多いはずです。

それら諸々の理由から、僕はプラグインではなく、コーディングで解決できる内容であれば、優先して対応したいと考えています。

コーディング内容

では、実際のコーディング作業に入ります。

とは言っても、コピペで済むので簡単ですよ。

修正するファイル

修正するファイルは、

index.php
archive.php
function.php

です。

修正する際は子テーマにしよう

テーマを修正する際は、基本的には子テーマにした方が良いです。

なぜなら、テーマ自体に更新がかかった際に、自分で修正した部分が全て消えてしまうからです。

僕も子テーマにして「Xeory Base」を修正しています。

参考になるサイトは沢山ありますが、

子テーマを作ってWordPressの既存テーマをカスタマイズする方法

いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存

Webクリエイターボックス

【WordPress】Xeory Baseの子テーマの設定方法_初心者向け

バズ部さんが無料提供しているwordpressのテーマ「xeorybase」の子テーマの設定の仕方をまとめました。初心者の私が実際に設定した手順に沿って記事を書いています。

インハウスマーケターの日々のブログ

などはいかがでしょうか。

あと、本家からは子テーマが反映されなかった際の対応方法を丁寧に教えてくれています。

子テーマが反映されません

Xeory-無料WordPressテーマ-

index.phpの修正

修正は、51行目を削除して、新たに2行追加するだけです。

修正前のindex.php

        <?php } ?>
      
        <?php the_content('続きを読む'); ?>
      </section>

<?php } ?>

<?php the_content('続きを読む'); ?>

</section>

3行目の「続きを読む」と書かれている行を削除します。

修正後のindex.php

<!--
  ┏━━━━━━━━━━━━━━━━━━━━
  ┃2018-03-XX
  ┃　続きを読むの自動化対応
  ┗━━━━━━━━━━━━━━━━━━━━
------------- start -->
        <?php the_excerpt(); ?>
        <a href="<?php the_permalink(); ?>" class="more-link" rel="nofollow">続きを読む</a>
<!-- -------- end -->

      </section>

<!--

┏━━━━━━━━━━━━━━━━━━━━

┃2018-03-XX

┃　続きを読むの自動化対応

┗━━━━━━━━━━━━━━━━━━━━

------------- start -->

<?php the_excerpt(); ?>

<a href="<?php the_permalink(); ?>" class="more-link" rel="nofollow">続きを読む</a>

</section>

6、7行目を追加します。

僕はコメントを入れていますが、適宜、修正したことが分かるように適当なコメントを入れておいた方が良いと思います。

archive.phpの修正

修正は、index.phpと同様です。52行目を削除して、新たに2行追加するだけです。

修正前のarchive.php

        <?php } ?>

        <?php the_content('続きを読む'); ?>

      </section>

<?php } ?>

<?php the_content('続きを読む'); ?>

</section>

3行目の「続きを読む」と書かれている行を削除します。

修正後のarchive.php

<!--
 ┏━━━━━━━━━━━━━━━━━━━━
 ┃2018-03-XX
 ┃　続きを読むの自動化対応
 ┗━━━━━━━━━━━━━━━━━━━━
------------- start -->
        <?php the_excerpt(); ?>
        <a href="<?php the_permalink(); ?>" class="more-link" rel="nofollow">続きを読む</a>
<!-- -------- end -->

      </section>

<!--

┏━━━━━━━━━━━━━━━━━━━━

┃2018-03-XX

┃　続きを読むの自動化対応

┗━━━━━━━━━━━━━━━━━━━━

------------- start -->

<?php the_excerpt(); ?>

<a href="<?php the_permalink(); ?>" class="more-link" rel="nofollow">続きを読む</a>

</section>

6、7行目を追加します。

function.phpの修正

これまでの修正で「続きを読む」の自動化は完了しています。

ただし、自動的に切った部分の文字が「[…]」になっているんですね。

それを自分好みの文字に変える対応を function.php に書きます。

これについては好みなので適宜対応してください。

対応内容は、以下のコードを追加するだけです。

// ┏━━━━━━━━━━━━━━━━━━━━
// ┃2018-03-20
// ┃　続きを読むの自動化対応
// ┗━━━━━━━━━━━━━━━━━━━━
//-------- start
function my_excerpt_more($more) {
    return '...';
}
add_filter('excerpt_more', 'my_excerpt_more');
//-------- end