覚え書きブログ

読者です 読者をやめる 読者になる 読者になる

WordPress覚え書き(Bonesテーマの改造編)

前回導入した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テーマのデフォルトの設定では、アイキャッチ画像を投稿したとしても、トップページに表示されない。
f:id:hirotaka_hachiya:20150411125431p:plain

これに関しては、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>' );
?>