今回はTwentyTwelveのトップページやカテゴリーページ等記事一覧が表示されるページを抜粋記事にしていくカスタマイズです。
WordPressの初期設定では1ページに表示される記事数が10記事になっていると思います。しかし、10記事をそのままズラズラと並べられると一番下に行くまで非常に時間がかかりますよね。記事一覧の意味がない！そこで活躍するのが抜粋記事というわけです。
このように記事の抜粋ができると本当に記事一覧って感じがします。訪問者も目的の記事を探しやすいはずです。
今回はこのようにトップページやカテゴリーページ、タグページ、アーカイブページで抜粋記事にするカスタマイズをしていきますが、上手く表示させるために抜粋記事の補助機能を持つプラグイン「WP Multibyte Patch」を「有効化」しておいて下さい。
このプラグインは最初からインストールされていると思います。
TwentyTwelveの記事一覧ページを抜粋記事にカスタマイズ
では早速カスタマイズしていきましょう。今回使うのは「content.php」ですので、子テーマに親テーマの「content.php」をコピーして追加しておいて下さい。「content.php」を開いて次の記述を探します。
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
この部分が抜粋記事を表示させるコードです。ここにトップページやカテゴリーページ等の抜粋記事にしたいページを付け足します。先ほどの部分をこのコードに書き換えて下さい。
<?php if ( is_search() || is_home() || is_archive() ) : // Only display Excerpts for Search ?>
ちょっと右に長くなってますのでスクロールしてコピーして下さい。これは条件分岐と言ってもしトップページなら～、アーカイブページなら～という指定ができます。この記述で各記事一覧ページが抜粋記事になっているはずです。簡単でしたね。しかし、これで満足してはいけませんよ。私はこの時点で気に入らない点が２つありました。
残された２つの課題
記事一覧を抜粋記事にするのは簡単でしたが、さらに２つの不満がでました。具体的には次の2点です。
- 「続きを読む」という表示が欲しい
- 記事一覧ページで設定したアイキャッチ画像が表示されてない
1番目の説明ですが、抜粋記事にしたら「続きを読む」という表示になると思っていたのですが、実際はこのようになってます。
[…]←なんだコレ？クリックもできないし。という訳でこれも改良する事にしました。
2番目に関しては抜粋記事にアイキャッチ画像が表示されてませんでしたので、これも改良する事にしました。結果的にはこの2つともクリアしてこのように表示する事ができました。
抜粋記事の左に小さなサイズ（サムネイルサイズ）のアイキャッチ画像を表示させて、きちんと「続きを読む」も表示させることもできました。この2点のカスタマイズについても記事にしますので順番に読んでみて下さいね。
しげぞう博士様
もしかして・・・と思って、今ここに来たら下記の記事を発見し、やっぱりお返事をいただけたんだーと思いました。気づかず、お返事遅くなってすみません。
バージョンアップしないと、ハッキングや改ざんされる恐れがあるのですね。知りませんでしたーーー！ プラグインはバージョンアップしていくようだと、なんとなくわかっていたのですが、ワードプレスもそうでしたか。
テキストエディターは、広告コートを貼るときだけ使っていました。
集中力に欠ける感じがして、それで何とかならないかと思い、カチャカチャと操作しているうちに、ビジュアルエディターで文字を太くして書けることを偶然知りました。でも、このままだと、今までとは違う文字の大きさや形で反映されてしまうことを知りました。しげぞう博士のおっしゃる通りで、テキストエディターで、少し練習してみます。ありがとうございました。
乃風様
返信ありがとうございます。基本的にWordPressは常に最新に更新しておいた方がいいです。セキュリティーの関係で古いバージョンのままにして何年も放置おくのはハッキングとか改ざんの危険性もあります。なので基本的には更新するのですが、通知が来てすぐに更新するのではなくて、更新した方の情報とかを調べてから更新するようにしてます。
どうしても不具合が出る場合には1つ前のバージョンに戻す方法もありますが私はやったことがありません。とりあえず次の更新待ってみるのも良いと思いますし、この機会にテキストエディタの練習するのも良いかもしれませんね！
しげぞう博士様
いつもお世話になっております。しげぞう博士は、ワードプレスの更新は他の方の情報が出回ってから更新されていたのですね。さすがだと思いました。ワードプレスの更新はすぐにしないといけないのかと、ずっとそう思っておりました。あぁ～～～～～知らなかったぁーーーーー！
テスト専用のサイトをお持ちとのこと、これにも驚きました。さすがだー・・・と思うばかりです。あ、それで以前、例のキャッシュの切り離し後について、詳しいことがわかったのですね。そうかー・・・。そういうことだったのですね。すごいなぁー。
やはりビジュアルエディターの行間、つまってますよね？ やはり気のせいではなかったのですね。テキストのウェジェット？ あとで見てみます。
今回、最初に更新した時、記事の一番上に飾る大きな写真を取り込む時のクリック表示場所が、英字に変わってしまい、「あら？」と思いました。でもその次の更新で、それが元に戻りました。
そうかー・・・当面はビジュアルエディタを使わずに記事を書けばいいんだ・・・と気づきました。
今回の事で、ふと思ったのですが・・・。ワードプレスの更新って、次々に来ますでしょう？ それを例えば、３つ、４つ見送って、それで５回目の超最新バージョンを更新しても問題ないということなのでしょうか？ つまり、間の３つ、４つの更新を飛ばしてから、ワードプレスを更新しても問題ないということなのでしょうか？
ワードプレスを作っている人たちって、例えば今回の不具合をもう知っているのでしょうか？ もう既に誰かが知らせてるんでしょうかね？
ともあれ次の更新をじぃ～～～～～～～～～～～～と、待つことにします。
複数のサイトを持つということは、こういう時とかに便利でいいですね。思い知りました。１つのサイトを維持していくだけで精一杯なので、とりあえず私はこのペースで行って見ようかと思っています。いつもありがとうございます。また来ます。
乃風様
返信ありがとうございます。私はいつも他の方の情報が出回ってからWordPressの更新をするようにしているためまだ4.8に更新してません。ただ、ちょっとテスト用のサイトがいくつかあるので、更新してみたのですが、乃風様の言われるようにビジュアルエディタの行間が詰まってますね。あと、テキストのウェイジェットとか新たに追加したら表示が崩れる事もあるみたい。私はビジュアルエディタは使わないのでほとんど気にならないのですが、他のサイトの更新は今回は見送りして様子をみたいと思います。
もうしばらく待って、解決策が出てくるのを待つか、次回のアップデートまで待つかという感じかなと思います。多分近いうちに解決策がでてくるかなと思います。ビジュアルエディタの見た目をCSS何とかするみたいな感じの解決ができるかもしれませんね。
とりあえず数日から1週間程度待ってみて解決策が出てこない場合には再度コメントしてもらっていいですか？私も探してみます。
しげぞう博士様
しげぞう博士のおっしゃる通りでした。ワードプレスの更新がもう一度来ました。早速、更新してみたのですが、結果は同じでした。
現在、プラグインを１３個載せているのですが、「試しに・・・」と思い、一旦全てを停止し、再び全てを有効化してみました。でも結果は同じでした。
それで今度は、１つずつプライグインを有効化して、確認してみたのですが、やはり結果は同じでした。
行間がぴったりくっついてると、やはり記事を書きづらいです。どうしたらいいでしょうか。どうぞよろしくお願いいたします。
しげぞう博士様
な～んだ、そういうことだったのですね。でも、どうしてワードプレスだとわかったのでしょうか？ しげぞう博士のご回答に、とにかくいつも驚くばかりです（まー、博士だからねぇー・・・）。
私は、あの後、ふとこう閃き、「あ、そうかぁー、犯人はプラグインだ！」って。それで「停止」と「有効化」を、何度かカチャカチャと繰り返したのですが、やはりダメでした。
しかもですよ、なんで明日か、明後日に、ワードプレスの更新がくるって、わかったのでしょうか？（すごいですね！） インターネットでは既にそういう情報が流れている・・・ということなのでしょうか。
ま、でもいいや。原因がわかったので、うれしくなりました。ありがとうございました。じゃ、もうちょっと待ってみますね。やっぱり、気のせいじゃなかったのですね。それもわかってよかったです。
乃風様
コメントありがとうございます。多分ですが、間もなくもう1度WordPressの更新通知がくると思いますのでそれを更新して下さい。今日か明日くらいと思います。それでも治らない場合にはお手数ですが再度コメント下さい。もうしばらく待ってみて下さいね！
しげぞう博士様
いつもお世話になっております。乃風です。
今朝、ワードプレスの更新１つと、Twenty TwelveやTwenty Therteenなどのテーマの更新４つを行いました。その後、ビジュアル画面で書きかけの記事を書こうとしたら、行間同士が妙にくっついていて、読んだり書いたりがしづらくなってしまいました。以前はこんなにくっついていなかったように思います。これを元に戻すにはどうしたらいいのでしょうか？
テキスト画面の方は以前と変わっていない感じなので、こっちは大丈夫だと思います。どうぞよろしくお願いいたします。
再度質問失礼いたします。
たぶんですが、カテゴリーを抜粋記事にしている途中(続きを読む・アイキャッチ画像)の設定の際に、記事内のリンクが細文字になってしまいました。しかし、CSSにはしっかり太文字にすると記述しています。content.phpのどこかになにか妨げるコードがあるのかなと思いましたが、原因が分からずで…。
原因の方が分かれば、ご指摘いただければと思います。貴重なお時間をすいません。よろしくお願い致します。
ありがとうございます。
記述の順番がおかしくなっているかもしれません。
もう一度初めから確認してみます。
＞K子様
コメントありがとうございます。CSSが反映されない原因ですが、幾つか基本的な部分を書いておきますね。
まず1つ目。CSSは下に書いた記述（後に書いた記述）が優先されますので、同じ記述を2回書くと後の記述が反映されます。なので、子テーマの一番下にどんどんカスタマイズの記述をしていって下さい。
2つ目は単純な記述ミスが原因の場合もあります。コロンとセミコロンの記述ミスや、括弧｛｝の閉じ忘れ、もしくはID名やクラス名が間違っていないか確認してみると良いと思います。
３つめはブラウザのキャッシュです。CSSの記述をしたらブログを表示して「F5」を押してリロードしてみて下さい。もしくは別のブラウザで確認してみるといいかもしれません。特にブラウザでIEを利用している場合はCSSが上手く反映されていない場合もあります。
以上基本的な部分ですが、確認してみて下さい。
いつもお世話になっております。
今はTwentyTwelveカスタマイズにあたふたしながら取り組んでいます。
何か所か上手くできないところがありますので、分かる範囲でアドバイスいただけたらと思います。
・抜粋記事の一覧にした時にアイキャッチ画像の右側に文字が移動できない
・サイト全体の横幅やサイドバーの幅の変更ができない
・パンくずリストの設置はできるが横並びにならない
一度ファイルを作り直しているのでプラグインをWP Multibyte Patchのみにしています。
その影響でしょうか？
基本が分かっていない初心者なのですみません。
宜しくお願い致します。