Wordpressのテーマファイルを0から作成する際に、イチから書くと面倒なのでコピペ素材。
スタイルは適宜あてるように、大枠のみ
凝ったデザインでなければ、テーマファイルは下記の通りで問題ない。
テーマファイル
- index.php
- header.php
- footer.php
- sidebar.php
- archive.php
- singular.php
- home.php
- serch.php
- style.css
- functions.php
これに各種ファイル格納フォルダとしてimages
、css
、js
、inc
、fnc
fnc
には、functions.php
に入れるコードで、ログイン画面、ダッシュボード等のコントロール、パンくずリスト、カスタム投稿等をそれぞれファイルに分けてinclude。
(パンくずリストは別記事で)
header.php
を簡素化するため、style.css
以外のメディアサイズでのスタイルやWebフォント(google Fonts等)は、functions.php
で出力。
繰り返し同じ情報を出力する場合は、inc
配下にparts
ファイル作成。
sidebar.php
は、ワンカラムサイトでは不要だが、WPの仕様で必ずテーマフォルダに入れなくてはならなくなったため、不要な場合は空のファイルを置く。
デザインがシンプルなサイトであれば、究極はindex.php
ファイルに条件分岐するだけでいいかもしれない。
インデックス出力(テーマファイル:index.php)
該当するテーマファイルがない時に使用するファイル。条件分岐で404(Not Found)の表示も兼ねる。
<?php
//====================================================
// Template Name: Index(汎用Temp)
//====================================================
get_header(); ?>
<main>
<section>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<h2><?php the_title() ?></h2>
<?php the_content(); ?>
<?php the_posts_pagination(); ?>
<?php
endwhile;
elseif('404'):
?>
<h2>お探しのページは見つけることができませんでした。</h2>
URLが変更されたか、削除された可能性があります。<br>
トップページ戻ってご確認ください。<br>
<p><a href="<?php echo home_url('/'); ?>">トップページへ戻る</a></p>
<?php
endif;
?>
</section>
<section class="sidebar">
<?php get_sidebar(); ?>
</section>
</main>
<?php
get_footer(); ?>
TOPページ(テーマファイル:home.php)
エリアごとにパーツ化し、メンテナンス性向上。
ファイルへの名付けルールは特にないっぽいが、私はコンテンツのパーツであることがわかるようにファイル名の頭にparts-
を付与している。
<?php
//====================================================
// Template Name: Home(TOP)
//====================================================
get_header(); ?>
<main>
<?php get_template_part('inc/*****'); ?>
<?php get_template_part('inc/*****'); ?>
<?php get_template_part('inc/*****'); ?>
<?php get_template_part('inc/*****'); ?>
</main>
<?php
get_footer(); ?>
「投稿」出力(テーマファイル:singular.php)
タイトル+公開日+最終修正日+アイキャッチ画像+コンテンツ
single(投稿ページ)とpage(固定ページ)共通で利用
<?php
if(have_posts()) :
while(have_posts()) : the_post();
?>
<h1><?php the_title(); ?></h1>
<span>公開日</span><?php the_time('Y/m/d'); ?>
<span>最終修正日</span><?php the_modified_date('Y/m/d'); ?>
<?php
if(has_post_thumbnail()){
?>
<figure><?php get_the_post_thumbnail(); ?></figure>
<?php
}
?>
<div>
<?php the_content();?>
</div>
<?php
endwhile;
endif;
?>
「アーカイブ」出力(テーマファイル:archive.php)
アーカイブのタイトルは、カテゴリを取得するか、get_the_archive_title();
で表示。
アイキャッチがない場合はNoimages.png
を表示(別途画像用意)
- 本文は字数制限50文字
- ボタン設置ではなく、アイキャッチと文章等にページリンク
WPでページネーションの関数が実装されたので、関数を呼び出すだけで簡単に導入できるようになったのはうれしい。
<?php
if(is_category()) {
//カテゴリ名取得
$cat = get_category(get_query_var('cat'));
$cat_id = $cat->cat_ID;
$cat_name = $cat->name;
echo '<h1 class="en-txt under-line">' .$cat_name. '</h1>';
} elseif(is_archive()) {
//titleにspanタグ入るのでstrip_tagsで削除
$archtitle = get_the_archive_title();
echo '<h1>' .strip_tags($archtitle). '</h1>';
}
?>
<?php
if(have_posts()) :
while (have_posts()) : the_post();
?>
<a href="<?php the_permalink(); ?>">
<?php
if(has_post_thumbnail()){
echo '<figure>' .get_the_post_thumbnail(). '</figure>';
} else {
echo '<figure><img src="' .get_template_directory_uri(). '/images/noimages.png"></figure>';
}
?>
<h4><?php the_title(); ?><span><?php the_modified_date('Y/m/d') ?></span></h4>
<?php
//本文を文字数制限表示
if(mb_strlen($post->post_content,'UTF-8')>50){
$content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 50,'UTF-8'));
echo '<div class="txt-box">' .$content.'……'. '</div>';
}else{
echo '<div>' .str_replace('\n', '', strip_tags($post->post_content)). '</div>';
}
?>
</a>
<?php
endwhile;
?>
</div>
<?php
//ページネーション
the_posts_pagination(array(
'prev_text' => 'PREV',
'next_text' => 'NEXT'
));
?>
<?php
endif;
?>
WPの基本中の基本コードだが、過去のテーマファイルから持ってくると、スタイルに関連するコードが邪魔なので。
備忘録も兼ねて。