はじめまして まえおきです
21日のアドベントカレンダーです。急いで書いたので、間違っているところも、あるかもしれません、ご指摘いただけますと幸いです。
Wordpressを去年から今年にかけて今までの３倍さわることが増えたので、記事を書こうと思いました。すぐれているテーマなどを使うことである程度のアクセシビリティだったり、ソースコードをきれいにしたりとか、実現できるのですが、好きにHTMLを書きたかったことやサイト内でテンプレートや投稿タイプが複数作ることもあり、テーマを作ってみることにしました。
シンプルなテーマの作成
Wordpressのテーマを作るのに必要なファイルは、多くありません。（と、本で読んだ。）
なので、自分で構築するにあたり、コーディングしやすくするために、機能がわかりやすいファイル分け重視で揃えました。
私のそろえたファイルは下記の通りです。
.
├── 404.php
├── archive.php
├── footer.php
├── functions.php
├── header.php
├── index.php
├── page.php
├── screenshot.jpg
├── search.php
├── sidebar.php
├── single.php
└── style.css
慣れているためにも、ファイルにそれぞれ役割をちゃんと持たせたかったこともあり、最初からたくさん作ったよ。
ちなみに、他案件でも同じ感じにシンプルに作った時は下記のファイルから作りました。
.
├── footer.php
├── functions.php
├── header.php
├── index.php
└── style.css
それぞれのファイルに関して
コーディングするので、HTMLの構造を基本このような感じに作ることを想定して、
<html>
<head></head>
<body id="ページのスラッグ">
<header></header>
<main>
<article>
<header>
<h1> </h1>
</header>
<section class="要素１">
<h2> </h2>
</section>
<section class="要素２">
<h2> </h2>
</section>
<section class="要素３">
<h2> </h2>
</section>
<footer></footer>
</article>
</main>
<footer></footer>
</body>
</html>
それぞれのファイルの中身はできるだけシンプルに下記のようにしました。
404.php
<?php get_header(); ?>
<h1>記事が見つかりません</h1>
<div>検索結果：<?php the_search_query(); ?></div>
<?php
global $query_string;
query_posts($query_string . "&post_type=post");
?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?> <!-- キーワードに合った記事を表示させる処理 -->
<div><a href="<?php the_permalink(); ?>"> <?php get_the_title();?> </a> </div>
<?php endwhile; ?>
<?php else: ?> <!-- キーワードが見つからないときの処理 -->
<form method="get" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>">
<label for="s">キーワード検索</label>
<input type="text" placeholder="キーワード検索" name="s" class="searchfield" id="s" value="" />
<input type="submit" value="検索" alt="検索" title="検索" class="searchsubmit">
</form>
<p>キーワードはみつかりません。</p>
<?php endif; ?>
<?php get_footer();
archive.php
<?php
get_header();
have_posts();
$cat = get_the_category();
// カテゴリー名の取得
$cat_name = $cat[0]->name;
//print_r($cat);
echo '<h1>'.$cat_name. '</h1>';
the_archive_description( '<div class="taxonomy-description">', '</div>' );
the_permalink();
the_title();
the_posts_pagination(
array(
'prev_text' => '<span>' . __( '＜' ) . '</span>',
'next_text' => '<span>' . __( '＞' ) . '</span>' ,
'before_page_number' => '<span>' . __( '' ) . ' </span>',
)
);
get_footer();
footer.php
<footer>
コピーライト
</footer>
<?php wp_footer(); ?>
</body>
</html>
functions.php
<?php
header.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" >
<?php wp_head(); ?>
</head>
<body>
<header>
</header>
テンプレートによってCSS分けようかなと思ったので、function.phpで読み込まないで、header.phpに入れました。
index.php
<!DOCTYPE html>
<?php get_header(); ?>
<?php if (have_posts()): ?>
<?php while (have_posts()) : ?>
<?php the_post(); ?>
ここに記事の情報を使ってなにか表示する。
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
<?php endwhile; ?>
<?php endif;
the_posts_pagination(
array(
'prev_text' => '<span>' . __( '＜' ) . '</span>',
'next_text' => '<span>' . __( '＞' ) . '</span>' ,
'before_page_number' => '<span>' . __( '' ) . ' </span>',
)
);
?>
<?php get_footer();
page.php
<?php get_header(); ?>
<?php if (have_posts()):
while (have_posts()) :
the_post();
the_content();
endwhile;
endif; ?>
<?php get_footer();
screenshot.jpg
テーマのサムネイル画像なので、なんでもよい。
拡張子もpngでも、jpgでもよい。
search.php
<?php get_header(); ?>
<form method="get" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>">
<label for="s">キーワード検索</label>
<input type="text" placeholder="キーワード検索" name="s" class="searchfield" id="s" value="" />
<input type="submit" value="検索" alt="検索" title="検索" class="searchsubmit">
</form>
<div>検索結果：<?php the_search_query(); ?></div>
<?php
global $query_string;
query_posts($query_string . "&post_type=post");
if (have_posts()){
while (have_posts()) : the_post(); //<!-- キーワードに合った記事を表示させる処理 -->
the_permalink();
get_the_title();
endwhile;
}else{
echo "<h1>記事が見つかりません</h1>";
}
}
get_footer();
sidebar.php
<?php
echo 'サイドバー';
?>
何を入れるかは考えていなかった。
ポピュラーポスとか入れても良いと思って、何も書かなかった。
single.php
<?php get_header(); ?>
<?php if (have_posts()):
while (have_posts()) :
the_title('<h1>','</h1>');
the_post();
the_content();
endwhile;
endif; ?>
<?php previous_post_link(); ?>
<?php next_post_link(); ?>
<?php get_footer(); ?>
style.css
/*
Theme Name: original ともたけ
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前 ともたけ
Version: 1.01
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/
/* この下に通常のcssを書いていく */
テーマの所在
wordpressで書き出されるタグに関して調整はできるところとできないところがあるのですが、調整できるところはできるだけ書きたいので、記事が入ってきても、変わることがないように、シンプルにベースを作りました。
投稿用のsingle.phpは、もうちょっと、ちゃんと書いてゆきました。
使い回しする、コンバージョンボタンなどは読み込むようにすることと、読み込む単位をタグとフォルダ名で分けると読み込むときにタグが描きやすかったです。
例えば、
最新のお知らせを読み込むときのPHPファイル名を"section_information_list.php"
（※informationはカスタム投稿タイプを作った。）
<section class="information_list">
<ul class="information_items">
<?php
$arg = array( ... );
foreach (...
?>
<li class="information_item">
...
</li>
<?php endforeach;
wp_reset_postdata();
?>
<ul>
</section>
sectionから作成したので、ファイル名も、section。
最新のイベント記事を読み込むときのPHPファイル名を"section_event_list.php"
リストならば、./parts/list/に格納。
コンバージョンボタンだったら、
PHPファイル名を"section_CV_button.php"
./parts/component/に格納。
もし、sectionで切り出さないinformationリストなどがあったら、PHPのファイル名は"ul_information_list.php"
その時は、２重管理になるので、そもそものinformationリストの使い方から考え直します。
デザイン作っている時点で、いくつかルールは決められるのですが、運用してゆくと時々ルールが変わることがありますので、
迷ったら、私の場合は小さく作る方に倒しています。
single.phpは自分以外の人がブロックエディタで更新するので、最低限書きました。
single.php
<?php get_header(); ?>
<main>
<article>
<?php if (have_posts()):
while (have_posts()) :
?>
<header>
<?php
the_title('<h1>','</h1>');
?>
</header>
<section>
<?php
the_post();
the_content();
endwhile;
endif; ?>
</section>
<footer>
<?php previous_post_link(); ?>
<?php next_post_link(); ?>
</footer>
</article>
</main>
<?php get_footer(); ?>
こんな感じです。
最終的に作ったのは、もうちょっと書きました。
まとめ
Wordpressのテーマをシンプルにしたら、開発に時間がかかるので、よい方法とは言えませんが、思い通りのHTMLを書く必要があるなど、何か特別な状況なのでしたら、自分で作る選択をしてもよいのかなと思いました。