ワードプレスオリジナルテーマ作り方③ head内記述と共通部分パーツ化
2023年05月22日
head内記述と共通部分パーツ化
今回はhome.php（トップページに使用するファイル）の記述をすこしと、home.phpというよりか<head></head>内に記述するものをご説明していきます。また、共通して使うコードをパーツ化して使い回せるようにしていきます。
head内の記述するコード
home.phpファイルの中身はこんな感じで記述しています。
下記が正解というわけではなく、使いそうなものを入れています。ご自身の環境にあったもので添削してください。
bodyの中はまだなにも書いていません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="index,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no">
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
<meta name="keywords" content="<?php if(is_home()): ?>
<?php wp_title(',',true,'right'); ?>
<?php elseif(is_page()): ?>
<?php wp_title(',',true,'right'); ?>
<?php elseif(is_single()): ?>
<?php echo esc_html(get_post_type_object(get_post_type())->label); ?><?php echo ","?>
<?php elseif(is_archive()): ?>
<?php echo esc_html(get_post_type_object(get_post_type())->label); ?><?php echo ","?>
<?php elseif(is_category()): ?>
<?php single_cat_title() ?><?php echo ","?>
<?php elseif(is_tax()): ?>
<?php single_cat_title() ?><?php echo ","?>
<?php else: ?>
<?php endif; ?>キーワード02,キーワード03,キーワード04,キーワード05">
<meta name="description" content="<?php wp_title('ページです。', true, 'right'); ?><?PHP bloginfo('description');?>">
<meta property="og:site_name" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="<?php if(is_home()): ?>
<?PHP echo esc_url( home_url() ); ?>/">
<?php elseif(is_single()): ?>
<?php echo get_permalink()?>">
<?php elseif(is_archive()): ?>
<?php echo get_post_type_archive_link( get_post_type() ); ?>">
<?php elseif(is_category()): ?>
<?php
$url = get_category_link( get_query_var('cat') );
echo $url;
?>">
<?php elseif(is_tax()): ?>
<?php echo get_term_link( $term, $taxonomy );?>">
<?php else: ?>
<?php echo get_page_link( $id );?>">
<?php endif; ?>
<meta property="og:image" content="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/snsmain.jpg">
<meta property="og:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php wp_title('ページです。', true, 'right'); ?><?PHP bloginfo('description');?>">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">
<meta name="twitter:description" content="<?php wp_title('ページです。', true, 'right'); ?><?PHP bloginfo('description');?>">
<meta name="twitter:image" content="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/snsmain.jpg">
<link rel="shortcut icon" href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/favicon.ico">
<link rel="apple-touch-icon" href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/apple-touch-icon.png">
<link href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/css/style.css" rel="stylesheet" type="text/css">
<!--ここにアナリティクスのタグをいれます。-->
<?PHP wp_head();//headの最適化競合防止など?>
</head>
<body>
</body>
<?php wp_footer(); ?>
</body>
</html>なんじゃこらっと思った方！！
僕も思います。こちらのブログを見ている方はHTMLとCSSは書けるけど、ワードプレスのオリジナルテーマの作り方がまだわからない方が見ていると可能性が高いと思いますが、
簡単に説明すると通常のHTMLのタグにワードプレス専用のタグを追加したりしています。
基本的にはHTMLで作ってワードプレス専用のタグを追加
ワードプレスのオリジナルテーマを作るときはHTMLで構築して
それはワードプレスで準備されている専用のタグを追加するって作業がオリジナルテーマを完成させることになります。
僕もまだまだ知識がないのでかなり適当な説明になりますが（間違っている可能性大）上から順に説明していきます。今回はHTMLの復習もかねて、意味なく深堀り、（ブログの文字数稼ぎ）のために書いていきます。
１行目
１行目これはHTML（ホームぺージだよ）って感じの宣言的なやつです。
2行目
２行目htmlタグの始まりで、このタグで囲まれているのはホームぺージとして認識される的な奴、ちなみに始まりが<html>終わりがスラッシュが入った</html>ですね。
これがHTMLの基本ですね。
始まりのタグと終わりのタグで囲む、例外でbrとかの囲まなくていいものもあります。
3行目
３行目これはhaedタグの始まり
ホームぺージの脳みそになる部分ですね、これは一般的にブラウザー（グーグルクロームとか）でみても、普通にみていたら見れない部分です。
ここに書くものは見る人に対して書くものでなく、検索エンジン（グーグル様）様に説明することを書く的なイメージです。
4行目
４行目グーグル様このページ見てよっていうタグ。なくてもいいです。テストの段階でページをグーグルの検索にかけたくない場合はここの記述をnoindex,nofollwにすれば検索にひかかることはありません。
5行目
５行目文字の種類はutf８だよって書いてます。
6行目
６行目これはレスポンシブデザインにするときに必要なタグです。
詳しく勉強されたい方はhtml viewportで検索してみてください。完成させるのが目的の方はレスポンシブデザインを作りたいときはこれをいれるって感じで大丈夫です。
僕は雰囲気で作っているので、理解していません。すいません。
7行目
７行目数字がならんでいるときかってに電話番号じゃない数字を電話番号として認識しないでねってやつです。これをいれて電話番号にはaタグhref=”tel:00000″をいれて電話番号にしています。
ここまではただのHTMLですね。
ここからワードプレス専用のタグも出てきます。
8行目
８行名タイトルタグ<title>の中がワードプレス専用のタグです
<?php wp_title('|', true, 'right'); ?>ぺージのタイトルを表示するタグなんですけ少しカスタマイズしてます。
タイトルを表示するときに右に｜をいれてねって感じになっています。
ページのタイトルがマリオ君だと
マリオ君 |
って感じで自動的に|がはいります。
つぎに
<?php bloginfo('name'); ?>はサイトのタイトルを表示っていうタグです。
サイトのタイトルはワードプレスの設定・一般のサイトタイトルに入力したものです。
すべて言葉で書くと
titleタグの中に、
ページのタイトルに｜を右側にくっつけて出力してそのあとにサイトのタイトルを出力
ってことです。
9行目
９行目はキーワードタグですが、ここは条件分岐を使用しています。
条件分岐はもし○〇の場合はこうしてそうじゃない場合はこうしてねってことです。
弊社ではキーワードも各ぺージごとに適したものに変えていますので、条件分岐でキーワードを入れています。
※基本的にページのタイトルをいれていますが、ブログのタイトルとか長いものはカテゴリーの名前とかにしています。
オールインワンSEOパックという有名なプラグインもありますが今回は自作で書いた場合の説明をしております。
ちょっと文字で説明するのが難しくなってきたので
簡単に説明します。
基本コピペでオッケーで、不具合や思った通りに行かない場合のみ検索して調べればOKです。
適当ですみません↓
文字（言葉口調）で説明していきます。
<?php if(is_home()): ?>もしトップぺージなら
<?php wp_title(',',true,'right'); ?>ページのタイトルの右に,をつけて出力※正直今回はいりません
<?php elseif(is_page()): ?>トップページじゃなくて個別ぺージなら
<?php wp_title(',',true,'right'); ?>ページのタイトルの右に,をつけて出力
<?php elseif(is_single()): ?>上記じゃなくて投稿の記事ぺージなら
<?php echo esc_html(get_post_type_object(get_post_type())->label); ?><?php echo ","?>投稿の記事のラベルを出力（最新情報なら最新情報とか）そのあとの,を直でかいてもいいんですが勉強のためechoで出力。echoとはphp（ワードプレスを構成している言語？）で出力を意味します。カンマを出力って意味ですね。
<?php elseif(is_archive()): ?>上記じゃなくて投稿の記事一覧ぺージなら
<?php echo esc_html(get_post_type_object(get_post_type())->label); ?><?php echo ","?>投稿の記事のラベルを出力（最新情報なら最新情報とか）してカンマを出力って意味です。
<?php elseif(is_category()): ?>またまた上記じゃなくてカテゴリーの記事ぺージなら
<?php single_cat_title() ?><?php echo ","?>カテゴリーのタイトルを出力とカンマ出力
<?php elseif(is_tax()): ?>またまた上記じゃなくてタクソノミーの記事ぺージなら（タクソノミーとはカテゴリーの友達みたいな感じで、カスタム投稿などを作成したときにカテゴリーとして使用することが多いです。）
<?php single_cat_title() ?><?php echo ","?>カテゴリー（タクソノミー）のタイトルを出力とカンマ出力（ここはどう設定しているかによるので、個人でやり方をきめてください）
<?php else: ?>
<?php endif; ?>キーワード02,キーワード03,キーワード04,キーワード05">もしも終了でキーワード02,キーワード03,キーワード04,キーワード05″>を固定で記述って感じです。
キーワード部分はこんな感じです。
読み返したら、文章が下手なんでかなり見ずらいですね。すません
しかし、ブログを書く（とにかくやることが優先なので・見た目とかは後の話）を優先ですすめていきます。
23行目
23行目はディスクリプション・サイトの説明部分ですね。
<?php wp_title('ページです。', true, 'right'); ?><?PHP bloginfo('description');?>すでにおなじみのページのタイトルを出力して右側にぺージです。を出力してサイトのディスクリプション・ワードプレスの管理画面の設定のキャッチフレーズを出力って感じです。
<?PHP bloginfo('description');?>上記がサイトのディスクリプション・ワードプレスの管理画面の設定のキャッチフレーズを出力です。
24行目から48行目まではOGPの設定です。
OGP設定はツイッターやフェイスブック・インスタグラム・ラインとかのSNSに情報を渡すものになります。
SEO（検索順位上位表示対策）に良いとされていますので、記述するに越したことはないですね。
上記で説明してないとこだけ説明します。
26行目これは表示されているぺージのURLを記述する場所なのでURLを出力するワードプレスのタグを書いています。
それでは説明
<?php if(is_home()): ?>トップページなら
<?PHP echo esc_url( home_url() ); ?>/">サイトのURLを出力
<?php elseif(is_single()): ?>投稿の記事ぺージなら
<?php echo get_permalink()?>">投稿記事のURLを出力
<?php elseif(is_archive()): ?>アーカイブ記事の一覧ページなら
<?php echo get_post_type_archive_link( get_post_type() ); ?>">アーカイブのポストタイプを
<?php elseif(is_category()): ?>カテゴリーのページなら
<?php
$url = get_category_link( get_query_var('cat') );
echo $url;
?>">カテゴリーのURLを出力
<?php elseif(is_tax()): ?>タクソノミーのページなら
<?php echo get_term_link( $term, $taxonomy );?>">タクソノミーのURLを出力
<?php else: ?>上記以外なら
<?php echo get_page_link( $id );?>">固定ページのURLを出力
<?php endif; ?>終了です。
あと説明してないのは42行目に書いてある
<?PHP echo esc_url( get_template_directory_uri() ); ?>ですね。これは画像までのパスが出力されますので、今回は画像はimgフォルダに格納する予定ですのでimgの前にコピペすると画像までの絶対パスが表示されます。
これはよく使うタグです。
残りは49行目はファビコン（グーグルのタブの横についてるアイコン）を表示するタグで
50行目がアイフォンとかでホーム画面に追加するとき時に表示させる画像を表示するタグで画像サイズは180×180
51行目はCSSを読み込むタグで
最後に53行目
<?PHP wp_head();>とにかく</head>の前に入れるもので重要なタグです。
不具合を防止してくれるタグと思ってください。
59行目にある
<?php wp_footer(); ?>も同様で不具合を防止するもので基本的にこちらは</body>の前に記述します。必須ですね
以上めちゃくちゃわかりずらいですけどhead内に記述する内容の説明でした。
最後にhead内は基本的に共通（例外はありますが）ですので
こちらをパーツ化したいと思います。
パーツ化共通化
かっこよくパーツ化といいましたが、共通の部分は別ファイルにして
すべてのページに反映されるようにするだけです。
パーツとして読み込むワードプレスタグは
<?PHP get_template_part("フォルダ/.phpファイルの拡張子なしの名前");?>です。フォルダはなくてもいいですが整理整頓のために使用します。
今回はワードプレスで共通になりそうなヘッダー部分やフッター部分やナビボタンなど共通部分はpartsフォルダに入れる予定なので
今回は
<?PHP get_template_part("parts/header");?>にしました。partsフォルダの中にheader.phpを作ってheader.phpに<body>より上をすべてコピーしてパーツ化します。
header.phpの中身は下記
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="index,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no">
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
<meta name="keywords" content="<?php if(is_home()): ?>
<?php wp_title(',',true,'right'); ?>
<?php elseif(is_page()): ?>
<?php wp_title(',',true,'right'); ?>
<?php elseif(is_single()): ?>
<?php echo esc_html(get_post_type_object(get_post_type())->label); ?><?php echo ","?>
<?php elseif(is_category()): ?>
<?php single_cat_title() ?><?php echo ","?>
<?php elseif(is_tax()): ?>
<?php single_cat_title() ?><?php echo ","?>
<?php else: ?>
<?php endif; ?>キーワード02,キーワード03,キーワード04,キーワード05">
<meta name="description" content="<?php wp_title('ページです。', true, 'right'); ?><?PHP bloginfo('description');?>">
<meta property="og:site_name" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="<?php if(is_home()): ?>
<?PHP echo esc_url( home_url() ); ?>/">
<?php elseif(is_single()): ?>
<?php echo get_permalink()?>">
<?php elseif(is_category()): ?>
<?php
$url = get_category_link( get_query_var('cat') );
echo $url;
?>">
<?php elseif(is_tax()): ?>
<?php echo get_term_link( $term, $taxonomy );?>">
<?php else: ?>
<?php echo get_page_link( $id );?>">
<?php endif; ?>
<meta property="og:image" content="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/snsmain.jpg">
<meta property="og:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php wp_title('ページです。', true, 'right'); ?><?PHP bloginfo('description');?>">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">
<meta name="twitter:description" content="<?php wp_title('ページです。', true, 'right'); ?><?PHP bloginfo('description');?>">
<meta name="twitter:image" content="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/snsmain.jpg">
<link rel="shortcut icon" href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/favicon.ico">
<link rel="apple-touch-icon" href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/apple-touch-icon.png">
<link href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/css/style.css" rel="stylesheet" type="text/css">
<!--ここにアナリティクスのタグをいれます。-->
<?PHP wp_head();//headの最適化競合防止など?>
</head>パーツ化が終わったhome.phpは下記
<?PHP get_template_part("parts/header");//ここでヘッダーよみこんでるよ?>
<body>
<?php wp_footer(); ?>
</body>
</html>かなりすっきりしました。
パーツ化は必ず行うようにしましょう。もしパーツ化せずに100ぺージ制作したら100ぺージ修正しないといけなくなります。（極論ですね）
今後の作業のためにも、共通になりそうなところはパーツ化しておくのがよいかと思います。
ここがチェケラ
パーツ化共通化は今後の作業効率も考えて重要だね。
めちゃくちゃ見づらく、わかりずらいですが、以上です。
次は前回決めたレイアウトの様になるようにbodyの中にHTMLとCSS・ワードプレスタグを作って書いていきたいと思います。
それじゃまた。
