前記事では、WordPressテーマ「AFFINGER4」の専用子テーマ「JET」の導入手順、カスタマイズの引継ぎ方法、注意事項などをご紹介しました。
-
-
AFFINGER4 専用子テーマ【JET】に変更しました ～カスタマイズの引継ぎ・注意点など～
当ブログで利用しているWordPressテーマ「AFFINGER4」に専用子テーマ「JET」を導入しました。 「JET」は、トップページ・アーカイブページ・記事下の関連記事をカード型で表示することがで ...
「JET」を有効化して最初に見たときの感想は...
「あれ？記事タイトルが短い？」
というか、「JET」が短いのではなくて「私」が長いんですよね。
以前から気になりつつ、短めのタイトルを意識しながらもまだ長いという...(笑)
一般的にブログ記事のタイトルは、26～32文字位がベストなんて言われています。
これを機会にアクセスの少ない記事のタイトルを見直してみようかな。
せっかくのカード型の記事一覧。
現在の記事タイトルから内容が伝わらないと困りますので、文字数変更のカスタマイズを行うことにしました。
スポンサーリンク
4つのファイルの編集
WordPressダッシュボード→外観→テーマ→テーマの編集→下記の4つのファイルをそれぞれ編集します。
- itiran-pickup-top.php
- itiran-random-top.php
- itiran-thumbnail-on.php
- kanren-thumbnail-on.php
パソコンの「Ctrlキー」＋「F」で表示される検索欄に words と入力してマークされる下記部分を探してくださいね。
|
1 |
<?php echo wp_trim_words( get_the_title(), 30, '...' ); ?> |
または、
|
1 |
<?php echo wp_trim_words( get_the_title(), 23, '...' ); ?> |
上記コード内の「30」「23」の部分を表示したい文字数（当ブログでは「55」）に変更します。
こちらが、変更後のキャプチャです。
タイトルはほぼ全文表示されるようになりましたが、「JET」は、アドセンスのインフィード広告が自然に馴染むように作られているので、タイトルの文字数を変更して無理にエリアを広げてしまうと、赤枠部分に余白ができてしまうんですね...。
トップページの記事一覧エリアのカスタマイズ
タイトルの文字数変更によってできてしまうインフィード広告の下の余白の対策として、トップページの背景画像を透過するコードをコメントアウトして背景色を白にしました。
WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」を開きます。
パソコンの「Ctrlキー」＋「F」で表示される検索欄に home main と入力してマークされる下記コードを /**/ で囲んでコメントアウト。
|
1 2 3 |
/*.home main { background-color:transparent!important; }*/ |
さらに、PC表示の最初の投稿の左右の余白をなくすコードを最下部に追加しました。
|
1 2 3 4 5 6 7 |
/*JETトップページ最初の投稿左右余白（パソコンのみ） ここから*/ @media print, screen and (min-width:960px) { #st-magazine .kanren .st-fist-post { padding-right:0 !important; padding-left:0 !important; } } |
カスタマイズ後のキャプチャです。
インフィード広告の下の余白が見えなくなりました。
画像をクリックすると、当ブログのトップページが別タブで開きます。
カテゴリ表示のカスタマイズ
当ブログでは、AFFINGER4管理→投稿・固定記事設定→「記事一覧・関連記事一覧などにカテゴリを表示する」にチェックを入れると表示されるカテゴリの背景を見出しやフッターに合わせて画像にしています。
こちらのカスタマイズ方法は、下記ページでご紹介しています。
-
-
【AFFINGER4】記事タイトル上のカテゴリとフリーボックスの背景を画像にする方法
WordPressテーマ「AFFINGER4」の記事タイトル上のカテゴリとフリーボックスウィジェットの背景を画像にする方法をご紹介します。 -----投稿ページ----- 背景と押しピンの2つの画像を ...
また、「JET」サンプルサイトの下記ページには、カテゴリ別のカラー設定方法が掲載されています。
サンプルサイトサンプルのカスタマイズについて/JET
一覧に閲覧数を表示するカスタマイズ
こちらのカスタマイズは、「AFFINGER4会員専用サイト」内の記事を参考にさせていただいています。
ログインしたユーザーだけが閲覧できるページですので、リンクやカスタマイズコードをこちらでお伝えすることはできませんが、取り入れてみたい方は、AFFINGER4会員専用サイトのサイト内検索欄に PV と入力して該当記事を探してみてくださいね。
「JET」のカード型の一覧だけではなく、通常の新着記事一覧・アーカイブページ・記事下の関連記事にも閲覧数を追加することができます。
以上、AFFINGER4 専用子テーマ「JET」の記事タイトルの文字数変更とその他のカスタマイズ方法をご紹介しました。
最後までお付き合いくださりありがとうございます。