0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Wordpressのテーマファイルの基本(コピペ素材)

Posted at

Wordpressのテーマファイルを0から作成する際に、イチから書くと面倒なのでコピペ素材。
スタイルは適宜あてるように、大枠のみ
凝ったデザインでなければ、テーマファイルは下記の通りで問題ない。

テーマファイル

  • index.php
  • header.php
  • footer.php
  • sidebar.php
  • archive.php
  • singular.php
  • home.php
  • serch.php
  • style.css
  • functions.php

これに各種ファイル格納フォルダとしてimagescssjsincfnc
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の基本中の基本コードだが、過去のテーマファイルから持ってくると、スタイルに関連するコードが邪魔なので。
備忘録も兼ねて。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?