どうもタスです。
このブログはWordPressの「Xeory Base」というテーマを使用しています。
シンプルでとっても洗練された使い勝手の良いテーマではないかと思っています。
この記事の目次
何もせず記事を投稿するとトップページが長くなる
ただ、気になったのが記事を書いてそのまま投稿すると、トップページに記事がそのままの長さで表示されてしまうことです。
それが何記事もあったら、トップページのスクロールが激しくなり過ぎて、見ている読者からするとウンザリしますよね。
そこで、僕は「続きを読むタグ」を挿入していたのですが、これがまたどこに挿入するかで悩むのです。
もちろん、トップページが長くなり過ぎないように、そして、個々の記事が同じくらいの間隔になるようにタグを入れるのですが、記事導入部の文字数によっては上手く行かないこともあり、どうにかならないかなと思っていました。
最終的には、プラグインで上手く調整できそうだと知ったので、その方法を取ろうと考えていました。
プラグインではなくコーディングで解決できる
そう思っていたら、なんと…
プラグインではなく、コーディングで実現できることを知りました！
参考にさせて頂いたサイトはこれです。
この記事と同様の対応を行ったらサクッとできたので、僕の記事でも同様にお知らせしたいと思います。
すないわんさん、ありがとうございました。
大体、本文を100文字くらい抜粋したところで「続きを読む」ボタンが挿入されるので、見た目がとてもキレイになります。
なぜプラグインではなくコーディングで対応する？
プラグイン自体はブラックボックスで、且つ動作が重くなることや表示に不具合が出る可能性があることが指摘されています。
それに対してコーディングは自分で理解しながらコードを触るので、万が一不具合が起こった際もすぐに直せることができますし、基本的に簡潔な対応で終わることが多いです。
プラグインは、不特定多数の方に使用してもらうことを前提に作成しているので、本来行いたいこと以外に付け加えているコーディングなども多いはずです。
それら諸々の理由から、僕はプラグインではなく、コーディングで解決できる内容であれば、優先して対応したいと考えています。
コーディング内容
では、実際のコーディング作業に入ります。
とは言っても、コピペで済むので簡単ですよ。
修正するファイル
修正するファイルは、
- index.php
- archive.php
- function.php
です。
修正する際は子テーマにしよう
テーマを修正する際は、基本的には子テーマにした方が良いです。
なぜなら、テーマ自体に更新がかかった際に、自分で修正した部分が全て消えてしまうからです。
僕も子テーマにして「Xeory Base」を修正しています。
参考になるサイトは沢山ありますが、
などはいかがでしょうか。
あと、本家からは子テーマが反映されなかった際の対応方法を丁寧に教えてくれています。
index.phpの修正
修正は、51行目を削除して、新たに2行追加するだけです。
修正前のindex.php
|
1 2 3 4 |
<?php } ?> <?php the_content('続きを読む'); ?> </section> |
3行目の「続きを読む」と書かれている行を削除します。
修正後のindex.php
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- ┏━━━━━━━━━━━━━━━━━━━━ ┃2018-03-XX ┃ 続きを読むの自動化対応 ┗━━━━━━━━━━━━━━━━━━━━ ------------- start --> <?php the_excerpt(); ?> <a href="<?php the_permalink(); ?>" class="more-link" rel="nofollow">続きを読む</a> <!-- -------- end --> </section> |
6、7行目を追加します。
僕はコメントを入れていますが、適宜、修正したことが分かるように適当なコメントを入れておいた方が良いと思います。
archive.phpの修正
修正は、index.phpと同様です。52行目を削除して、新たに2行追加するだけです。
修正前のarchive.php
|
1 2 3 4 5 |
<?php } ?> <?php the_content('続きを読む'); ?> </section> |
3行目の「続きを読む」と書かれている行を削除します。
修正後のarchive.php
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- ┏━━━━━━━━━━━━━━━━━━━━ ┃2018-03-XX ┃ 続きを読むの自動化対応 ┗━━━━━━━━━━━━━━━━━━━━ ------------- start --> <?php the_excerpt(); ?> <a href="<?php the_permalink(); ?>" class="more-link" rel="nofollow">続きを読む</a> <!-- -------- end --> </section> |
6、7行目を追加します。
function.phpの修正
これまでの修正で「続きを読む」の自動化は完了しています。
ただし、自動的に切った部分の文字が「[…]」になっているんですね。
それを自分好みの文字に変える対応を function.php に書きます。
これについては好みなので適宜対応してください。
対応内容は、以下のコードを追加するだけです。
|
1 2 3 4 5 6 7 8 9 10 |
// ┏━━━━━━━━━━━━━━━━━━━━ // ┃2018-03-20 // ┃ 続きを読むの自動化対応 // ┗━━━━━━━━━━━━━━━━━━━━ //-------- start function my_excerpt_more($more) { return '...'; } add_filter('excerpt_more', 'my_excerpt_more'); //-------- end |
これで、「[…]」から「…」に変わりました。
最後に、修正したファイルをサーバーにアップロードしたら対応完了です。
まとめ
今回は、「続きを読む」タグを自動で挿入する方法を紹介しました。
これで細かいことに悩むこともなくなりました。
記事の内容が最も気にしなければならないとは思いますが、僕は体裁もとても気になります。
意外と目立つところなので、スッキリしました！
その他のXeoryBaseカスタマイズ記事
他にも紹介しているので、良ければ見て下さい！
- XeoryBaseに「前の記事」「次の記事」リンクを実装する方法
- Broken Link Checkerでリンク切れをチェック
- 「XAMPP」を利用したWordPressのローカル環境構築 その1
- 「XAMPP」を利用したWordPressのローカル環境構築 その2
- 「XAMPP」を利用したWordPressのローカル環境構築 その3
コメント