「バズ部のテーマXeory Baseを使いたいんだけど、トップページに記事全文表示されてすごく見づらい…。投稿した記事をブログ一覧のように表示できるカスタマイズ方法が知りたい。」という方向け。
結論、3分で解決できます。
Xeory BaseのカスタマイズについてコピペOKな簡単方法を教えます。

本記事は下記の4本立てです。

あ、ちなみにこのブログで使っているテーマが『Xeory Base』です。

バズ部のテーマの最大の問題点

バズ部といえば、Webマーケティング、コンテンツマーケティングのプロ集団。

バズ部はコンテンツマーケティングに特化したサイトを提供していて、WordpressのテーマであるXeory Baseもそのうちの一つですね。

ありがたいことに誰でも無料で使えるテーマなのですが、超気になるのがトップページのデザイン。

デフォルトで使うと、記事全文が表示されてしまうというなんとも見にくくなってしまいます。

私も初めて使用したときに、てっきりブログ一覧のように表示されるのかと思いきや、がっつりトップページに全文表示されたもんだから「ええ！？Σ(ﾟДﾟ)」と動揺。

バズ部のサイトを見てみると下記内容が明記されています。

私たちはデザイン会社ではありません。
私たちはデザイン会社ではなくマーケティング会社です。
例えばデザイン会社はおしゃれなサイトにこだわりますが、私たちは成果が出るサイトにこだわります。
また、デザイン会社はクライアントの好みのサイトを目指しますが、私たちはクライアントの顧客の課題を解決し収益に繋がるサイトを追求します。(引用元：bazubu-shiki)

なるほど。

いくら成果がつながるサイトとはいえ、使う側としてはトップページに記事全文が表示されるというのは見づらいんじゃないかと思うし、きっと訪れた読者も見づらいハズ。

ということで、テーマのデザインは自分で何とかカスタマイズするしかなく、カスタマイズするにはWebプログラミングの知識が必要だということ。

これがXeory Baseの最大の問題点じゃないかなと思います。

Xeory Baseのカスタマイズに必要なファイル

「げげげ！？Webのプログラミング知識なんてないヨ！！Σ(ﾟдﾟlll)ｶﾞｰﾝ」という方でも大丈夫！

Xeory Baseのトップページに記事全文ではなく、ブログ一覧のように表示させるためのカスタマイズ方法はとっても簡単です。

3分もあればできてしまいます。

まずカスタマイズに必要なファイルは下記2つ。

WordPressの管理画面左メニューにある『外観』→『テーマエディター』からカスタマイズすることができます。

Xeory Baseのカスタマイズ方法

それでは具体的にカスタマイズの方法についてお伝えしましょう。

index.php

51行目にあるソースコードを書き換えます。

変更前(51行目のソースコード)

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

変更後

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

これだけです。

私は変更箇所がわかるようにしておきたいのと、変更前のソースコードも残しておきたいため、下記のように変更しています。

<!-- ↓ start トップページに記事全文を表示させずに一覧表示させる処理 (2020.05.01 変更) -->
	<!-- ?php the_content('続きを読む'); ? -->
	<?php the_excerpt(); ?>
	<a href="<?php the_permalink(); ?>" class="more-link" rel="nofollow" rel="nofollow">続きを読む</a>
<!-- ↑ end トップページに記事全文を表示させずに一覧表示させる処理 -->

51行目のソースコードを削除して上記ソースコードをそのままコピペすればOKです。

archive.php

変更箇所、変更方法はindex.phpとまったく同じ。

51行目にあるソースコードを書き換えます。

変更前(51行目のソースコード)

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

変更後

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

これだけです。

index.phpと同様、私は下記のようにソースコードを変更しています。

<!-- ↓ start トップページに記事全文を表示させずに一覧表示させる処理 (2020.05.01 変更) -->
	<!-- ?php the_content('続きを読む'); ? -->
	<?php the_excerpt(); ?>
	<a href="<?php the_permalink(); ?>" class="more-link" rel="nofollow" rel="nofollow">続きを読む</a>
<!-- ↑ end トップページに記事全文を表示させずに一覧表示させる処理 -->

51行目のソースコードを削除して上記ソースコードをそのままコピペすればOKです。

おまけのカスタマイズ(必要な方だけどうぞ)

以上でカスタマイズ完了し、無事Xeory Baseのトップページ表示が、記事全文からブログ一覧の表示になりました。

がしかし、『続きを読む』ボタンの前の表示が[…]となっています。

別にこれでも構わないという場合はいいのですが、「このカッコを取って、…という表示にしたい。」という方もいるはず。

ということで、『[…]→…』に表示を変更するカスタマイズの方法も載せておきます。

変更する必要のあるファイルは下記1ファイルのみ。

• function.php

下記ソースコードを追加するだけです。

// ↓ start 続きを読む[…]→…に変更する (2020.05.01 追加)
function my_excerpt_more($more) {
    return '...';
}
add_filter('excerpt_more', 'my_excerpt_more');
// ↑ end 続きを読む[…]→…に変更する

簡単ですね^^

まとめ

それでは今回の記事のまとめです。

3分もかからずにカスタマイズできたという方も多いかも。

こんなに簡単にカスタマイズできて、Xeory Baseのトップページが見やすくなるなら、いいんじゃないでしょうか^^

ではでは～ノシ