micata

micata:記事一覧の抜粋記事をカスタマイズする方法

mikata-logo

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では、無料WordPressテーマ:micataの記事一覧に表示される抜粋記事をカスタマイズする方法を紹介したいと思います。

ここでは

  1. 抜粋記事の文字数を変更
  2. 抜粋記事に「続きを読む」リンクを追加
  3. 続きを読むリンクの見た目を変更

という3つのカスタマイズを紹介していきます。

PHPの編集でややこしい部分があるかもしれませんけど、どれも他のテーマへの応用ができるカスタマイズです。よかったら参考にして下さい。

カスタマイズ前

↓ micataをインストールしたばかりの状態

micata-index-page-excerpt-before

カスタマイズ後

↓ 本文の抜粋を80文字に変更

micata-index-page-excerpt-after-1

↓ それぞれのページヘのリンク(「続きを読む」リンク)を追加

micata-index-page-excerpt-after-2

↓ 「続きを読む」リンクの手前にアイコンフォントを使用

micata-index-page-excerpt-after-4

[ad]

※ 今回はPHPファイルを編集していきます。管理画面に入れなくなることもあるので、PHPコードは注意して編集して下さい。

1. 抜粋記事の文字数を変更

最初は、記事一覧に表示される抜粋記事の文字数を変更する方法です。

1-1. WP Multibyte Patch をインストール

日本語は英語のような1バイトの文字と違って複数バイトの文字なので、どうしてもそのままの状態では、文字数を指定する場合に不具合が起こりやすくなってしまいます。

WordPressでは「WP Multibyte Patch」というマルチバイト文字専用のプラグインが用意されているので、このプラグインをインストールしておきます。

https://wordpress.org/plugins/wp-multibyte-patch/

micata-index-page-excerpt-multibyte-patch

※ 今回のカスタマイズ以外にも、文字数が思った通りに指定できないときには「WP Multibyte Patch」のプラグインを使ってみるのがオススメです。

1-2. functions.php を編集

それでは functions.php を編集して抜粋記事の文字数を変更していきます。

micata では子テーマの使用が推奨されているようなので、子テーマの functions.php に以下のコードを追加します。

// 抜粋記事の文字数を変更
function custom_excerpt_length( $length ) {
    return 80; // 80文字
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

ファイルを保存・更新すると、抜粋記事の文字数が80文字になりました。

micata-index-page-excerpt-after-1

もう少し文字数を多くしたい(少なくしたい)という場合には、追加したコードの return 80; という部分を別の数字にすれば大丈夫です。このときセミコロンなどの記号関係は消さないようにして下さい。

2. 抜粋記事に「続きを読む」リンクを追加

今度はそれぞれの抜粋記事に「続きを読む」リンクを追加する方法です。

これもフィルターフックを使ってカスタマイズできるので、先ほどと同じように functions.php に以下のコードを追加します。

// 本文の抜粋に「続きを読む」リンクを追加
function custom_excerpt_more( $more ) {
    return ' ... <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">続きを読む</a>';
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );

保存・更新すると、本文の抜粋に「続きを読む」リンクが追加されました。

micata-index-page-excerpt-after-2

「続きを読む」以外の文字にする場合には、上のコード中にある 続きを読む という部分を編集すれば大丈夫です。ここでも記号関係は消さないように注意して下さい。

2-1. 「続きを読む」リンクの見た目をカスタマイズ

最後に「続きを読む」リンクの見た目をカスタマイズしていきます。

先ほど追加したコードのリンク(aタグ)に「read-more」というクラスを追加したので、この .read-more というクラスを使ってスタイリングすることができます。

2-1-1. 文字の色を変更する場合

「続きを読む」リンクの文字を変更する場合には、以下のコードを micata の子テーマフォルダにある style.css ファイルに追加します。

.read-more {
    color: #FF0000;
}

CSSファイルを保存・更新すると、「続きを読む」リンクが赤になりました。#FF0000 部分を編集すれば他の文字色にすることができます。

micata-index-page-excerpt-after-3

2-1-2. リンクの下線を非表示にするには

「続きを読む」リンクの下線部分を非表示にするには、以下のコードを style.css に追加します。

.read-more {
    text-decoration: none;
}

2-1-3. 「続きを読む」リンクの文字サイズを変更するには

「続きを読む」リンクの文字サイズを変更する場合は、下のような感じでフォントサイズを変更すれば大丈夫です。

.read-more {
    font-size: 13px;
}

2-1-4. 「続きを読む」リンクの手前にアイコンを使うには

スタイリングの最後は、「続きを読む」リンクの手前にアイコンフォントを使用する方法です。

ここまでのスタイリングのように、CSSだけで対応することも出来なくはないんですが、PHPコードを編集した方が都合が良いことが多いので、先ほど functions.php に追加したPHPコードを編集してきます。

↓ 先ほど functions.php に追加したコード

// 本文の抜粋に「続きを読む」リンクを追加
function custom_excerpt_more( $more ) {
    return ' ... <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">続きを読む</a>';
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );

上のコード中の 続きを読む の手前に、以下のコードを追加します。

<i class="fa fa-arrow-circle-right"></i>

コード編集後、functioins.php に追加するコードは下のようになりました。

// 本文の抜粋に「続きを読む」リンクを追加
function custom_excerpt_more( $more ) {
    return ' ... <a class="read-more" href="'. get_permalink( get_the_ID() ) . '"><i class="fa fa-arrow-circle-right"></i> 続きを読む</a>';
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );

これで「続きを読む」リンクの手前にアイコンが追加されました。こういうアイコンを使っているサイト、たまにありますよね。

micata-index-page-excerpt-after-4

他のアイコンにする場合には、下のFontAwesome公式サイトにあるチートシートを使うと便利です。このページからお好みのアイコンを選んで、使いたいアイコンの fa-○○ 部分を先ほどのコードにコピペすれば大丈夫です。

https://fortawesome.github.io/Font-Awesome/cheatsheet/

micata-index-page-excerpt-fontawesome

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。