前回導入したBonesテーマを引き続き改造してみた。hirotaka-hachiya.hatenablog.com
3)トップページの記事を抜粋表示にする
デフォルトでは、記事が全部表示されてしまう。画像やテキストが沢山あるとトップページが長くなってしまう。記事を抜粋して表示するためには、WordPressの管理画面の外観->エディタにて、index.phpを次のように編集する。
【編集前】
<section class="entry-content cf"> <?php the_content(); ?> </section>
【編集後】
<section class="entry-content cf"> <?php echo mb_substr(strip_tags($post-> post_content), 0, 100); ?>... <a href="<?php the_permalink() ?>">続きを読む</a> </section>
ちなみに、mb_substr()関数の代わりに、the_excerpt()関数を使うこともできる。
【編集後2】
<section class="entry-content cf"> <?php the_excerpt(); ?> </section>
記事の最初の100文字のみを表示し、「続きを読む」をクリックすると全文が記載されたページthe_permalink()に飛ぶようになっている。
4)アイキャッチ画像(サムネイル画像)の表示
WordPressの投稿画面の右下に、下記のようなアイキャッチ画像を投稿するためのボタンがある。ただし、Bonesテーマのデフォルトの設定では、アイキャッチ画像を投稿したとしても、トップページに表示されない。
これに関しては、functions.phpに、以下のような説明が書いてある。
/************* THUMBNAIL SIZE OPTIONS *************/ // Thumbnail sizes add_image_size( 'bones-thumb-600', 600, 150, true ); add_image_size( 'bones-thumb-300', 300, 100, true ); add_image_size( 'bones-thumb-100', 162, 100, true ); /* to add more sizes, simply copy a line from above and change the dimensions & name. As long as you upload a "featured image" as large as the biggest set width or height, all the other sizes will be auto-cropped. To call a different size, simply change the text inside the thumbnail function. For example, to call the 300 x 100 sized image, we would use the function: <?php the_post_thumbnail( 'bones-thumb-300' ); ?> for the 600 x 150 image: <?php the_post_thumbnail( 'bones-thumb-600' ); ?> You can change the names and dimensions to whatever you like. Enjoy! */
つまり、add_image_size('XXX')により新たなサイズのアイキャッチ画像を追加することができ、the_post_thumbnail('XXX')関数を使うことにより、XXXで指定されたサイズのアイキャッチ画像を表示することができる。ちなみに、上記では、新たなサイズ(160x100)をadd_image_size( 'bones-thumb-100', 162, 100, true );により追加している。
そして、このサイズのアイキャッチ画像をトップページに表示するために、index.phpに下記を追加した。
<?php <section class="entry-content cf"> <?php echo '<p class="img_left">'; if(has_post_thumbnail()) { the_post_thumbnail('bones-thumb-100'); } echo '</p>'; echo mb_substr(strip_tags($post-> post_content), 0, 100); ?> ... <a href="<?php the_permalink() ?>">続きを読む</a> </section> ?>
ここで、has_post_thumbnail()関数は、アイキャッチ画像が登録されている場合は、真を返すので、アイキャッチ画像が登録されている投稿に関しては、the_post_thumbnail()が実行される。
http://wpdocs.sourceforge.jp/%E6%8A%95%E7%A8%BF%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB
5)ヘッダーにcssファイルのリンクを追加
header.phpには、style.cssなどのcssファイルへのリンクの記述がなく、次のようにwp_head()という関数を呼んでいる。
<?php // wordpress head functions ?> <?php wp_head(); ?> <?php // end of wordpress head ?>
このwp_head()を介して新たなcssファイルへのリンクを張るためには、functions.phpにて、add_actionという関数を次のように実行する。
function addstyle(){ echo "<link rel='stylesheet' type='text/css' href='xxx/css/default.css' />\n"; echo "<link rel='stylesheet' type='text/css' href='xxx/css/common.css' />\n"; } add_action('wp_head','addstyle'); */
ここでは、linkタグを2行出力するaddstyle()という関数を定義して、add_action関数にて、wp_headに該出力の内容を追加している。
6)カテゴリー別、月別表示のデザイン変更
カテゴリー別や月別表示のテンプレートは、archive.phpに設定されているので、デザインの変更には、archive.phpを編集する。ちなみに、bonesテーマのarchive.phpでは、カテゴリーや月の名前をとってくるのに、the_archive_title()とthe_archive_description()関数を使っているが、これらの関数は、WordPress4.1以降でしか対応していないので、注意が必要。もし、4.1未満の場合は、archive.phpの次の行をコメントアウトした方がよい。
<?php the_archive_title( '<h1 class="page-title">', '</h1>' ); the_archive_description( '<div class="taxonomy-description">', '</div>' ); ?>