2020/05/16 1:00
[Wordpress自作テーマ③]初心者の為のコーディング指南書「header・index・footer」
自作Wordpressの続きとなります。
今回からコーディング編という事で「ヘッダー」「インデックス」「フッター」の基本的な書き方というか「枠組み」をしていきましょう。
その後にスタイル（CSS）で形を整えていくという方向になります。
注意
この記事は「WPの自作テーマ作成をやってみたい」という初心者向けの内容となってます。
①の準備編にも書いてますが、まずはこちらのファイル一式の中身に沿った指南書となりますので、下記ファイルをダウンロードしてお使いください。
テンプレファイル一式 : ダウンロード
header例
ヘッダーの例となる記述です。
お作法的なものも含まれますので「header.php」のファイル内に取り合えずコピペしてみましょう。
【header.php】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="copyright" content="">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- StyleSheet -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/lib/css/style.css">
<?php wp_head();?>
</head>
<body ontouchstart="">
<header class="">
【ここにヘッダーの記述を書いていく】
<div class="">
<a href="" class="">
Home
</a>
<a href="" class="">
About
</a>
<a href="" class="">
Works
</a>
<a href="" class="">
Blog
</a>
<a href="" class="">
Contact
</a>
</div>
</header>
ヘッダーの「head」タグの中でメタタグ設定やスタイルシート（css）を読み込んだりしています。
「header」タグ内にはグローバルナビ（メニュー）等を書いておくとよいでしょう。
index例
「index.php」ファイルの記述例です。
上部でヘッダーのファイルを読込、下部ではフッターのファイルを読んでます。
その他にはhタグでブログタイトルを記入。
あとディスクリプション的なものも表示させてます。
これは管理画面内の「設定」にある「サイトのタイトル」と「キャッチフレーズ」の箇所を読み込んでます。
それからループの記述がありますが、これは「投稿記事」の一覧を出力する書き方となります。
公開になっている投稿記事の一覧を並べて表示させるループ例です。
【index.php】
<?php get_header(); // header.phpをここに読み込みます ?>
<h1 class="">
<?php echo bloginfo('name');?>
</h1>
<p class="">
<?php echo bloginfo('description');?>
</p>
<div class="">
<main class="">
<h2 class="">BLOG</h2>
<?php // ここからループの記述になります
$args = array(
'post_type' => 'post', // 投稿（post）を指定
'post_status' => 'publish' // 「公開」となっているもの
'orderby' => 'post_date', // 並び順を「日付」に
'order' => 'DESC', // 降順
'posts_per_page' => -1, // 表示数は「-1」で「全て」に設定
);
?>
<?php $posts = new WP_Query($args);?>
<?php if ($posts -> have_posts()):?>
<?php while($posts -> have_posts()) : $posts -> the_post();?>
<!-- 上記で設定されたループがここに出力されていきます -->
<div class="">
<a class="" href="<?php echo the_permalink($post->ID);?>">
<?php $image_url = ''; // 投稿記事内の1枚目の画像を出力させる為の設定開始 ?>
<?php if(preg_match( '/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi', $post->post_content, $matches)):?>
<?php $image_url = $matches[1];?>
<?php else: ?>
<?php $image_url = get_bloginfo( 'template_directory' ) . '/lib/images/【ノーイメージ用画像】.jpg';?>
<?php endif;?>
<img class="" src="<?php echo esc_attr($image_url); // 画像を出力 ?>" alt="<?php the_title();?>">
<div class="">
<?php $terms = get_the_terms($post->ID,'category');?>
<?php foreach ($terms as $term) : ?>
<object>
<a class="" href="<?php echo get_category_link($term);?>">
<?php echo esc_html($term->name); // カテゴリの出力 ?>
</a>
</object>
<?php endforeach;?>
</div>
<p class="">
<?php the_time('Y/m/d'); // 投稿の公開された日時 ?>
</p>
<h3 class="">
<?php the_title(); // 投稿のタイトル ?>
</h3>
</a>
</div>
<?php endwhile;?>
<?php endif; wp_reset_postdata();?>
</main>
<aside class="">
<?php get_sidebar(); // sidebar.phpをここに読み込みます ?>
</aside>
</div>
<?php get_footer(); // footer.phpをここに読み込みます ?>
index.php内は取り合えず「ヘッダー」と「フッター」を読み込む。
そしてメインコンテンツとなるブログ記事の一覧と、サイドバーを設置する感じの例が上記となります。
ポイントは「main」で囲む箇所と「aside」でサイドバーを囲む感じですね。
別に必ずこうしないといけないというルールがある訳ではないですが、SEO的に推奨されてる書き方のようなのでこうしてます。
投稿記事の出力させるループの書き方には慣れてください。
いろんなループの書き方を応用していくうちに、だんだん意味が分かってくると思います。
footer例
フッターは「footer.php」のファイルを使います。
取り合えずコピーライトなんかを載せてみましょう。
【footer.php】
<?php wp_footer(); ?>
<footer class="">
【ここにフッターの記述を書いていく】
<p class="">
© <?php bloginfo('name'); // コピーライト等 ?>
</p>
</footer>
<!-- Javascript用のファイル等があればbody閉じタグ前で読み込ませる -->
<script src="<?php echo get_template_directory_uri(); ?>/lib/js/app.js"></script>
</body>
</html>
フッターは上記の例ではシンプルに書いてますが、ナビメニューを再度書いたり、店舗情報や住所なんかを書いたりするのがセオリーです。
Javascriptのファイルを別ファイルで作っていく場合はここで読み込ませておくとよいでしょう。
取り合えずこれでTOPページの枠組みが完成
骨組みではありますが、一応これでサイトのTOPページを見る事ができるかと思います。
まだ投稿記事がないのでWP管理画面よりテスト記事を何かしら書いて公開してみてください。
それからスタイル（CSS）を当てていくという進め方が楽だと思います。
スタイル（CSS）の当て方
ド初心者の方にも分かるように説明するとCSSというのは文字の色を変えたり、表示の大きさや場所の指定等、配置された要素のスタイルを整える為のものです。
今回のダウンロードファイル一式に含まれてるWPテンプレに入ってるものは「CSS」ではなく「SCSS」というものを採用してます。
基本はCSSと同じ書き方でも使えますが、SCSSならではの便利な書き方もプラスして使えるというお得さがあります。
ただデメリットとしては「コンパイル」というものを行って、結局は「CSS」としての出力が必要となるので、その設定の手間が最初だけめんどくさいという事です。
「Sublime Text」のエディターを使ってSCSSをコンパイルする方法を記事にしてますので参考にしてみてください。
※config.rbファイルは既にテンプレ一式に含まれてます
さて、コンパイルの設定が済んだら上記のコード例にSCSS（CSS）を当てていきます。
class="" ←こうなっている全ての箇所が対象となります。
まずは任意のクラス名を付けましょう。
自由な名前でOKです。
例えばヘッダーを囲むように使うクラスであれば
class="l-header-wrapper"
とするとか。
l→レイアウトのL
header→ヘッダー
wrapper→囲み
次にヘッダーメニューのリンクで使うなら例えば
class="c-header-link"
とか。基本は自由です。
ただ、パッと見で分かりやすいようにつけておくのが後々のメンテナンス時に楽だと思います。
クラス名をつけたら次は実際にSCSSファイルに書いていきましょう。
テーマテンプレフォルダのこの場所
phper_v1.0.0 ＞ lib ＞ sass ＞ project ＞ _project.scss
「_project.scss」というファイルがあるので、まずはここに書いていってOKです。
本当は細かくファイルを作って分けて使っていく形がいいのですが、それは慣れてからでもいいでしょう。
まずはヘッダーで使うクラス名を「class="l-header-wrapper"」と書いたとしたら
【_project.scss】
.l-header-wrapper {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #000;
z-index: 9999;
}
こう書いたとします。
すると上部固定の黒いヘッダーバーが登場します。
同様に全てのタグに対して自由にスタイリングしていけばOKです。
※ちなみに「Sublime Text」を使ったSCSSのコンパイルはctrl+Bとなります
これで保存＆コンパイルとなります。
ここまでがうまく進められたらもう自作の道は大きく開けました。
後はひたすら応用となりますので根気よくページを作り進めていくのみです。
では続きへどうぞ。
現場から以上です！
895
PICK UP
Recommended
