「テンプレート」タグアーカイブ

記事一覧などのループ処理をテンプレート化してメンテナンス性をアップ

index.phpとsearch.phpに同じ内容のループ処理を記述していませんか?

良くある話ですよね。基本的な記事を出力する部分のレイアウトは同一だとしても、検索ページとフロントページは別々に作りたい。ただ、後々になってレイアウトの変更をしていくとなった時に困るんですよね。ちょっとした変更でも複数のphpファイルを編集しないといけなくなるのは面倒だし避けたいです。

というわけでループ処理をテンプレート化しましょ?

例えば私のサイトでは、記事一覧を出力するときはこういうコードが働いています。

<?php
$pagereq = $wp_query->query[paged] + 0;
$topposts = null;
while(have_posts()) {
the_post();
$parm = get_permalink();
$title = get_the_title();
$thum_id = get_post_thumbnail_id($post->ID);
$topimage = wp_get_attachment_image_src($thum_id, 'thumbnail');
$exp = mb_substr(get_the_excerpt(), 0, 50, 'utf-8')."...";
$topsrc = $topimage[0];
$topposts .= <<<"EOD"
<div id="post-{$post->ID}" class="post-{$post->ID} post type-post status-publish format-standard entry-item enry-lists">
<div class='thumbnail-box'>
EOD;
if(has_post_thumbnail()) {
$topposts .= "
<a href="{$parm}" class="thumbnail-align">
<img width='100' height='100' src='{$topsrc}' class='attachment-thumbnail wp-post-image' alt='{$title}' />
</a>";
}
$topposts .= "</div><h2 class='entryTitle entrylink'><a href='{$parm}'>$title</a></h2><div class='entry-summary'>{$exp}
</div>
</div>
n";
}
echo $topposts;

?>

色々な処理を挟んでいるのでちょっと長めですね。この記述をindex.phpやsearch.phpやarchive.phpで利用する場合、直接このコードを埋め込むよりも外部化してしまう方がグッと楽になるのは明白です。

get_template_part()を利用する

外部化する場合、get_template_part()がお勧めです。該当部分をテンプレート化する事で「<?php get_header(); ?>」などと同じような感覚で管理できるのでメンテナンス性が向上します。

関数リファレンス/get template part – WordPress Codex 日本語版

<?php get_header(); ?>
<?php get_template_part('loop', 'excerpt'); ?>
<?php get_footer(); ?>

こういう極端な事もできちゃいますw

get_template_part()は「get_template_part( スラグ名, テンプレート名)」という形で利用します。上記のコードの例だと呼び出されるテンプレートファイルは「loop-excerpt.php」です。このファイルの中に記事一覧出力のための記述が一式入っています。

このような形で管理していれば、忘れた頃に手を入れても迷うことはありません。

レスポンシブデザインのhtmlテンプレートの個人的厳選四つ

新しくサイトを立ち上げるときに一番大事だったりするサイトデザイン。その負担を軽減してくれるテンプレートは知っておくに越したことはありません。

ただ、個人的にビビッとくる物に出会える事は少ないため、厳選に厳選を重ねた俺まとめを残して置きます。

いつかこれを使ってサイト作るんだ・・・。

VINTAGE TEMPLATE


Demo Free Html5 and Css3 Templates | Html5xcss3.com

レトロな雰囲気がとてもオシャレ。落ち着きながらもとんがった雰囲気がとても良いですね。

ENGINERY


Demo Free Html5 and Css3 Templates | Html5xcss3.com

黄色が印象的なだけではなく、それぞれの要素がウインドウサイズに合わせてシームレスに変化します。メニューもまとまるわけではなく、そのままなところも良いですね。文字の後ろに文字が来たりして、細かな所にオシャレさを感じます。

SIMPLEX


SIMPLEX | Free Responsive Template by Dzyngiri

シンプルなデザインで横幅一杯に要素が並ぶのがとても壮観ですね。レスポンシブもとてもシンプルで印象があまり変わらないのが良いです。

prologue


Prologue | HTML5 UP

右側に固定されたメニューがとても大きく見やすいです。スマフォでの閲覧時にもメニューがにゅっと出るアクションでとてもかわいらしいです。