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

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【wordpress】すべての投稿記事一覧ページの作り方(twentytwelve用)

wordpress 備忘録

オナヌー備忘録。wordpress記事一覧ページですべてのカテゴリーはどうやって出すのだろうかとちょっと戸惑ったので記す。ちなみに私はwordpressでサイトを作る時は余計なソースがないと言われているテーマtwentytwelveをカスタマイズしている。以下出てくるソースもtwentytwelveから記述。

手順

①すべてのカテゴリー記事一覧ページ用のpage2.php(固定ページテンプレ)を新規作成し、archive.phpのソースをコピペ

②content.phpを複製して(content-2.php)、page2.phpにcontent-2.phpを紐付け

③すべてのカテゴリー記事一覧ページ用にカスタマイズ


①すべてのカテゴリー記事一覧ページ用のpage2.php(固定ページテンプレ)を新規作成し、archive.phpのソースをコピペ

まず、固定ページのテンプレートを新規で作成するところから始める。

wordpressの管理画面でこのテンプレの名前を認識させるためテキストエディタで以下のみを記述する。

<?php
/*
Template Name: blog
*/
?>

その後「page2.php」とファイル名をつけて保存し、wp-content/themes/twentytwelveの中にpage2.phpを入れる。

wordpress管理画面で外観-テーマ編集で右側のファイルリストを見ると

f:id:miukro:20140904152152p:plain

このように新たにphpファイルが追加されており、「blog」という名前で固定ページとして認識されている。

このファイルを選択肢、twentytwelveの元からある「archive.php」のソースを「page2.php」にコピペする。


②content.phpを複製して(content-2.php)、page2.phpにcontent-2.phpを紐付け

①でpage2.phpにarchive.phpをコピペしたが、このarchive.phpにはcontent.phpを呼び出すコードがある。ただ、このcontent.phpだと題名、内容、サムネイル画像の位置やサイズが自分が求めているものとは違うためこれを複製してcontent-2.phpとして自分なりにカスタマイズしていく。(念のためcontent.phpはバックアップとして残したい)そのカスタマイズの前に複製したらpage2.phpとcontent-2.phpを紐付けする。

page2.phpの下記のコードがcontent.phpを呼び出しているコード。

<?php get_template_part( 'content', 'none' ); ?>

これを次のように変更。

 <?php get_template_part( 'content-2', 'none' ); ?>

これでpage2.phpはcontent-2のソースコードを読み込むようになる。


③すべてのカテゴリー記事一覧ページ用にカスタマイズ

まず、すべてのカテゴリー記事が出力されるループを記述する。

テーマtwentytwelveなら

</header><!-- .archive-header -->

!

!

!

<?php
/* Start the Loop */
while ( have_posts() ) : the_post();


上記のコードの間「!」に下記2行記述。

<?php $paged = get_query_var('paged'); ?>
<?php query_posts("posts_per_page=10&paged=$paged"); ?>

これで全てのカテゴリーの記事が出力される。

ここから記事一覧ページのレイアウトを整理する。

もちろん各案件によって題名・内容・サムネイル画像の記述順序を変えてレイアウト変更する。

レイアウト変更の際にやった主な作業はサムネイルの画像サイズ変更と文章(記事内容)の抜粋文表示とそれに伴う「続きを読む」という単一記事へのリンクの自動表示だがこれらはfunctions.phpを少しいじる。

サムネイルの画像サイズ変更

まず、functions.phpで以下のコードを記述。

add_image_size( 'size1', 150, 150, true );

1.'size1'の部分は任意の名称でok。(content-2.phpにてこの名称でサイズ紐付け。
2.「150,150」の値は表示させるサムネイル画像の幅、高さの値。
3.「true」の記述部分は、trueにすると縮小時に切り抜きを行いfalseにすると縮小時に切り抜きを行わない。
次にcontent-2.phpのサムネイル画像のソースコードの部分で the_post_thumbnail();
から以下のように変更。

the_post_thumbnail('size1');

ここでfunctions.phpで記述したところと紐付けするんだねー。

文章(記事内容)の抜粋文表示とそれに伴う「続きを読む」という単一記事へのリンク自動表示

これはあれね。
f:id:miukro:20140906052956p:plain

この青文字の「続きを読む」っていうリンクね。

これは、content-2.php

<?php the_content(); ?>

上記のコードを

<?php the_excerpt(); ?>

に変更する。すると、記事の冒頭が抜粋された文が表示される。

その後、「WP Multibyte Patch」というwordpressに標準で入っているプラグインを有効化にし、編集画面で

'bp_excerpt_mblength' => 110,

というソース部分がある。この数値が冒頭抜粋する文字数の設定数になるので任意の数値を入力。

⇒これがなぜかできなくなってるので下記URL参考にて文字数変更。

http://rakuishi.com/archives/6359/


このままだとまだ、「続きを読む」というリンクが出ず、「...」になるんだったかなwなので、functions.phpに以下記述。

function new_excerpt_more($post) {
return '<p><a href="'. get_permalink($post->ID) . '">' . '......続きを読む' . '</a></p>';
}
add_filter('excerpt_more', 'new_excerpt_more');

これで「続きを読む」が出る。

以上。