XeoryBaseテーマに乗り換え後に必要なテーマのカスタマイズ方法

ブログのテーマを刷新しました。今までは海外ブロガーの無料テーマを使っていたのですが、カスタマイズに限界を感じて、一方でまだ有料テーマに手を出せるほど精進できていないと思っているので、今回無料ブログテーマとして有名なバズ部のXeoryBaseに変更しました。

XeoryBaseは見た目もシンプルで文字も読みやすいので、とても気に入ってるんですが、少し手直しをしてあげないと見た目が、ブログの趣向に合わない場合も出てきます。

今回は当サイトで引越し後に修正したテーマのカスタマイズ方法を備忘録として書いておきます。

子テーマを作成する

先ずは何よりも子テーマを作成しましょうね。子テーマが何かということがわかっていない方でも、今回のカスタマイズを行う場合には全て子テーマの作成手順をやってからカスタマイズすることをお勧めします。

子テーマが何なのかを簡単に説明すると、xeory_baseテーマをカスタマイズするときに、このテーマ自体のコードを変更してしまうと、今後テーマがアップデートされたときなどにカスタマイズがアップデートの度にリセットされてしまいます。変更したいファイルだけ、子テーマのフォルダに置いておけば、変更したコードの差分だけを読み込んでくれる仕様になっています。

そのため子テーマでカスタマイズをしておけば、元々のテーマをカスタマイズすることなく、かつ元ファイルのバックアップという意味でもファイルを残しておいてくれるので、とても便利ですね。

因みにここでは親テーマと言えば、xeory_baseを、子テーマと言えばxeory_base_childを指すものとします。

子テーマの作成方法は先ずはファイルマネージャーを使って、wordpressのテーマが格納されているフォルダ（public_html/サイトの名前/wp-contents/themes/）に移動して、xeory_base_childという名前のフォルダを作成します。

フォルダが作成できたら、次に以下の２つのファイルをテキストエディタなどで作成して格納してください。

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
?>

style.css

/*
Theme Name: xeory_base_child
Template: xeory_base
*/

この二つが格納し終われば、あとはダッシュボードに戻って子テーマを有効化するだけです。

トップページ＆アーカイブページに続きを読むを追加する

これは何をしたいかというと、xeory_baseがデフォルトの状態の場合は、”続きを読む”ボタンが上手く配置されていない場合があります。もしくはそもそも”続きを読む”自体が表示されていないケースも発生することがあるので、この部分のコードを修正しましょう。

以下が完成図です。

先ずはxeory_baseのフォルダから、index.phpとarchive.phpのファイルをダウンロードしてきてください。

この二つのファイルの中を覗いて、以下のコードを探して

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

以下のコードに差し替えてください。

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

差し替え終わったら、あとはこのファイルを子テーマのフォルダの直下に保存すれば修正完了です。

固定ページからアイキャッチを削除する

次に固定ページの表示方法のカスタマイズになります。Xeory Baseではデフォルトの表示方法だと固定ページにもアイキャッチを表示するようになっています。

これはサイトのデザインにもよるんですが、当サイトではあまりこの画像は要りません。固定ページはホームデザインにも関係してくるので、余計な画像は消してしまいましょう。

また同じようにxeory_baseのフォルダから今度はpage.phpのファイルをダウンロードしてきてください。そして以下のコードを削除してください。

      <?php if( get_the_post_thumbnail() ) : ?>
      <div class="post-thumbnail">
        <?php the_post_thumbnail(); ?>
      </div>
      <?php endif; ?>

ファイルが修正し終わったら、修正後のpage.phpを子テーマのフォルダxeory_base_childに保存すれば修正完了です。

投稿ページのアイキャッチのサイズを変更する

Xeory Baseのデフォルトの場合、アイキャッチ画像が右端にサムネイル表示された状態で、テキストが左に回り込むようなデザインになっています。これもサイトデザインにも寄りますが、当サイトでは邪魔なのでフルサイズで表示するように修正します。

以下が完成図になります。

ではまた同じようにxeory_baseフォルダから、今度はsingle.phpのファイルをダウンロードしてきてください。

テキストエディタでファイルを開いて、以下をコードを探してください。

        <?php if( get_the_post_thumbnail() ) : ?>
        <div class="post-thumbnail">
          <?php the_post_thumbnail(); ?>
        </div>
        <?php endif; ?>

サムネイルの画像サイズは、the_post_thumbnailで規定されているので、ここを今回はフルサイズ（元の画像のサイズ）で表示するようにしておきます。なので、’full’と指定すればOKです。

        <?php if( get_the_post_thumbnail() ) : ?>
        <div class="post-thumbnail">
          <?php the_post_thumbnail('full'); ?>
        </div>
        <?php endif; ?>

因みに他のサイズにしたい方は、’full’の代わりに以下のコードを差し替えればそのサイズで表示されるはずです。

the_post_thumbnail(); //パラメータ無し　→’post-thumbnail’
the_post_thumbnail( ‘thumbnail’ ); サムネイル（150 × 150）
the_post_thumbnail( ‘medium’ );中サイズ（300 × 300）
the_post_thumbnail( ‘large’ ); 大サイズ（640 × 640）
the_post_thumbnail( ‘full’ ); フルサイズ（アップロードした画像サイズ）
the_post_thumbnail( array(100, 100) ); //サイズを配列で指定

修正がし終わったら、single.phpを子テーマフォルダに保存しておけば修正完了です。