WordPress 初心者の為のheader.php解説(説明)

Wordpress 初心者の為のheader.php解説(説明)

WordPressのphp記載の説明を致します。ここで紹介するのはヘッダー(header.php)です。私もphpに関しては無知なので一緒に学んで解説(説明)していきます。SEO対策も出来る所はしていきましょう。テーマによって記載内容は異なりますが必要なものは一緒ですよ。私の使っているテーマはgraphyです。※Wordpressの中身を触る時は必ずバックアップをとりましょう。

 

目次

WordPressの仕組み

ヘッダー(header.php)の記載内容

idとclassの違いの説明

header.phpその①説明

<!DOCTYPE html>
 <!--[if IE 8]>
 <html class="ie8" <?php language_attributes(); ?>>
 <![endif]-->
 <!--[if !(IE 8) ]>
 <!--><html <?php language_attributes(); ?>>
 <!--<![endif]-->
 ?>

header.phpその②説明

<head>
 <meta charset="<?php bloginfo( 'charset' ); ?>">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title><?php wp_title( '|', true, 'right' ); ?></title>
 <link rel="profile" href="http://gmpg.org/xfn/11">
 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
 <?php wp_head(); ?>
 </head>

header.phpその③説明

<body <?php body_class(); ?>>
 <div id="page" class="hfeed site">
 <header id="masthead" class="site-header" role="banner">
 <div class="site-branding">
 <?php if ( get_theme_mod( 'graphy_logo' ) && get_theme_mod( 'graphy_replace_blogname' ) ) : ?>
 <h1 class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_theme_mod( 'graphy_logo' ) ); ?>" /></a></h1>
 <?php elseif ( get_theme_mod( 'graphy_logo' ) ) : ?>
 <div class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img alt="" src="<?php echo esc_url( get_theme_mod( 'graphy_logo' ) ); ?>" /></a></div>
 <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
 <?php else : ?>
 <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
 <?php endif; ?>

header.phpその④説明

<?php if ( ! get_theme_mod( 'graphy_hide_blogdescription' ) ) : ?>
 <div class="site-description"><?php bloginfo( 'description' ); ?></div>
 <?php endif; ?></div>

header.phpその⑤説明

<div class="main-navigation-wrapper">
 <nav id="site-navigation" class="main-navigation" role="navigation">
 <h1 class="menu-toggle"><?php _e( 'Menu', 'graphy' ); ?></h1>
 <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'graphy' ); ?></a>
 <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
 <?php if ( ! get_theme_mod( 'graphy_hide_search' ) ) : ?>
 <?php get_search_form(); ?>
 <?php endif; ?>
 </nav>
 </div>

header.phpその⑥説明

<?php if ( is_home() && get_header_image() ) : ?>
 <div id="header-image" class="header-image">
 <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt=""></div>
 <?php elseif ( is_page() && has_post_thumbnail() ) : ?>
 <div id="header-image" class="header-image">
 <?php the_post_thumbnail( 'graphy-page-thumbnail' ); ?>
 </div>
 <?php endif; ?>
 </header>
 <div id="content" class="site-content">

 

スポンサーリンク

WordPressの仕組み

もうご存知でしょうがWordpressの投稿記事で表示されている部分の主たるものは4つのPHPファイルで構成されています。この4つとはヘッダー(header.php)・サイドバー(sidebar.php)・フッター(footer.php)・単一記事投稿(single.php)となります。これらを理解する事によりWordPressが少しは初心者に優しくなると思います。※全部上げると混乱してしまうので取りあえずはこの4つからの説明していきます。まずはWordpressの簡単な説明を致します。

PHPの組み合わせ

今現在の私のTOP・固定ページPHPの仕組みです。ページhtmlと記載されている所が単一記事投稿(single.php)となります。3つのPHPヘッダー(header.php)サイドバー(sidebar.php)単一記事投稿(single.php)の組み合わせですね。

 

Wordpress 初心者の為のPHP解説(説明)とSEO対策1

WordPress header.php解説(説明) 構造の説明1

 

次に投稿記事のPHPの仕組みです。4つのPHPで構成されています。一番最初に上げた全ての項目ですね。ヘッダー(header.php)サイドバー(sidebar.php)フッター(footer.php)単一記事投稿(single.php)の組み合わせです。

 

Wordpress 初心者の為のPHP解説(説明)とSEO対策2

WordPress header.php解説(説明) 構造の説明2

 

最後にスマートフォンの組み合わせです。こちらも4つのPHPで構成されています。ヘッダー(header.php)サイドバー(sidebar.php)フッター(footer.php)単一記事投稿(single.php)の組み合わせです。

 

Wordpress 初心者の為のPHP解説(説明)とSEO対策3

WordPress header.php解説(説明) 構造の説明3

 

こうして見ると簡単な構成ですね。最初に記載しましたがここに記載してあるPHPの種類は主となるPHPです。全てでは有りません。そのPHPについてはまた後日説明します。勉強しときます。ではメインのヘッダーphpの項目について解説・説明していきましょう。

 

header.phpその①説明

<?php

PHP記載をする際はこの分から始めます。お決まりです。読み取りに来たらここはPHPで書かれていますと教える為に必要なコードとなります。

?>

PHPを閉じる分になります。これ以降はPHPでは有りませんと表記しているコードになります。

<!DOCTYPE html>

このコードはHTML5で書かれていますと言うコードになります。よってこれ以降のコードはHTML5で記載しないとエラーとなります。HTMLとはPHPと同じホームページ・ブログ・サイトで表示させる・処理を施す為の言語です。5とはバージョンの事を指します。

<!--[if IE 8]>

インターネットエクスプローラのバージョンIE8の指定になります。つまり以降はIE8に対してのコードになります。

if もしこれがと言うコードになります。この記載ではもしエクスプローラがIE8であればと言うコードになります。

<html class="ie8" >

html class 別のファイルで記載しているcssの記載内容(クラス)を呼び出しなさいと言うコードになります。

cssの何処かにie8が有ると言う事になります。ここで言うcssはstyle.cssです。場所はwp-content/themes/あなたが使っているテーマ名/style.cssです。cssとはスタイルを調整するコードです。文字の大きさ・フォント・装飾等がcssで設定出来ます。

<?php language_attributes(); ?>

htnl出力値:<lang=”ja”>

language_attributes(); WordPress専用の関数となります。関数とは決まり文句で()内に必要な条件を書きこむ事によりその条件を元に実行され出力されるものになります。ここでは()が入っていないので language_attributes(); が指定するファイル内を実行しろと言うコードになります。htmlの出力値が示す様にここで国表記がなされています。”ja”は日本を表しています。

場所はwp-includes/general-template.phpのファイルになります。凄く長いので省略します。

header.php language_attributes();関数の説明←クリックするとジャンプします。

<![endif]-->

先ほどのifに対して endif はここで条件が終了している事を指します。つまりif分からここまでの記載はエクスプローラーがIE8の時だけ実行されるコードになります。IE8では無かったら以降の処理から始めるという事ですね。

<!--[if !(IE 8) ]><!-->

if! 否定文字になるみたいですね。この場合だとIE8以外の場合と言う表現になります。

 <html <?php language_attributes(); ?>>

htnl出力値:<html lang=”ja”>

先ほどと同じ記載内容になります。

<!--<![endif]-->

endif if文が終わった事を表しています。

 

header.phpその②説明

<head>

ここは情報の処理・取得をする部分になります。お決まりです。例えば1+1=2になる様に+は増やしなさいと言う事と=はその合計を出しなさいと言う事と同じです。<head>はここで必要な情報を記述しなさいと言うコードになります。

<meta charset="<?php bloginfo( 'charset' ); ?>">

htnl出力値:<meta charset=”UTF-8″>

meta charsetは文字コードをブラウザが自動に最適にしてくれるコードになります。文字化けを防ぐ事ですね。よく出てくるmeatタグですがこれもお決まりです。meta charsetで一つのコードだと思って下さい。そしてその文字コード指定の条件に次のコードが入ってますね。見てみましょう。

bloginfo(); WordPressの関数になります。ダッシュボード設定一般のデータを見なさいと言う関数になります。その見に行く条件が’charset’になります。

でわ見てみましょうと言いたいのですがそれらしい記述が見つからず調べてみると※: Version 3.5 以降では UTF-8 がデフォルトとなっており、管理画面での設定ができなくなっています。と書かれています。さらに調べるとwp-includes/general-template.phpが対象ファイルになるようです。内容は下記の様な記載がされていました。説明は後日しますがUTF-8を使いなさいと記載されています。

charset':
$output = get_option('blog_charset');
if ('' == $output) $output = 'UTF-8';

簡単に書くことが出来そうです。SEO対策ができそうです。※UTF-8は一番文字化けを防ぐ文字コードとなります。

<meta name="viewport" content="width=device-width, initial-scale=1">

ここは少し特殊な記載になります。<meta name=“viewport” content=””>この記述で1つのコードになります。読み方はmeta nameで種類の名称を取得します。ここではviewportです。

viewport スマートフォンでの画面(携帯モード)を表しています。

content その名称の内容の指定をする部分になります

“width=device-width, initial-scale=1” 高さ・幅・倍率を指定しているコードになります。高・幅・倍率は各好きな値に設定できるのですが携帯の種類機種によって高さ・幅は違ってきます。”width=device-width, initial-scale=1″と記載する事により全ての機種に対応してサイズを的確に表示してくれるそうです。

<title><?php wp_title( '|', true, 'right' ); ?></title>

htnl出力値:<title>初心者がもの申す | ブログ歴3ヵ月の私が何かと色々もの申してみます。</title>

<title> ここからタイトルを記載をしますよと教えるコードになります。

</title> ここまでがタイトルの記載ですよと教えるコードになります。お決まりです。

wp_title( ); Wordpressの関数になります。wp_titleは使われる所によって出力される値が違うのです。例えば投稿ページ内で使用すればそのページタイトル・カテゴリーで使えばカテゴリー名になります。各項目に対して適正な値を返してくれます。

( ‘|’, true, ‘right’ ) |はタイトルの前後に付ける文字になります。trueは表示すると言う意味になります。rightとは最初に|を付ける場所を指定するコードになります右側を意味します。投稿ページで使用した場合とタグページで使用した場合で例をあげてみます。

 

Wordpress 初心者の為のPHP解説(説明)とSEO対策6

WordPress header.php解説(説明) タイトルの表示

 

<link rel="profile" href="http://gmpg.org/xfn/11">

xfnのフォーマットです。プロフィールになります。ここでは会社の同僚とか恋人同士とが記載出来るみたいですが・・・・要らないです。もはや廃棄処理フォーマットです。すぐに削除します。

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

html出力値:<link rel=”pingback” href=”http://seoaccessup.top/xmlrpc.php”>

link rel 1つのコードになりリンク(繋げる)の意味を指します。

<link rel=”pingback” 誰かがリンクを貼ったらと言うコードになります。

href 他のページにジャンプしなさいと言う意味です。

bloginfo( ‘pingback_url’ ); bloginfo()Woredpress関数でしたよね。ダッシュボード設定一般の値を取得しなさいと言う事です。見に行く条件がpingback_url ピングバックでURLを見に行きなさいと言う意味になります。

つまりここでは誰かがリンクを貼ったらダッシュボード設定一般のURL(サイトアドレス)を見に行きそのURL(サイトアドレス)でピングバックしなさいと言う意味になりますここで言うピングバックとはWordpress同士で有れば勝手に相互リンクを貼ってくれる機能です。つまり私のブログにリンクを貼るとあなたのブログにも私から自動でリンクを貼ると言うコードです。

<?php wp_head(); ?>

html出力値:<link rel=”alternate” type=”application/rss+xml” title=”初心者がもの申す &raquo……

凄く長いので省略します。全部記載しただけで約4000文字でした。

wp_head(); を実行しなさいと言うコードになります。

wp_head(); WordPressの関数でWordpressの現在のバージョンを値を取得する記載になります。 wp-includes/general-template.phpが対象ファイルになる様です。このコードは必須です。Wordpressプラグイン・javaScriptに影響があるようです。必ず記載しましょう。しかし無駄な記載が多そうなので簡素化は出来そうです。その内ホジリます。

</head>

情報記載を閉じますと言うコードになります。

 

header.phpその③説明

<body <?php body_class(); ?>>

html出力値:<body class=”home blog logged-in admin-bar no-customize-support has-sidebar footer-0 has-avatars”>

<body> とは値を出力する場所になります。一般的なブログ・サイトの場合はこちらに記事内容を記載してたりしてます。

body_class(); WordPress関数です。ここで実行されるのはPHP言語ファイルとCSS言語ファイルです。()内に何も記載されていない場合は固定ページなら固定ページのPHP・CSSを読みに行き、もしアーカイブならアーカイブのPHP・CSSを読みに行きます。見に行くPHPは wp-includes/post-template.phpです。見に行くCSSはwp-content/themes/あなたが使っているテーマ名/style.cssです。ここで記事のスタイルを定義しているんですね。

<div id="page" class="hfeed site">

div id=”page” とはページ全体を包み込むと言うコードになります。wp-content/themes/あなたが使っているテーマ名/style.cssに割り当ててスタイルを決めています。

class=”hfeed site” とはhfeed siteと言うクラスを実行しますと言う意味です。何処に有るかは分かりません。スタイルです。

<header id="masthead" class="site-header" role="banner">

先ほどとほぼ同じ記載内容になりますがdivの代わりにheaderが使われていますがここでは無視して下さい。又ここではmastheadでidが割り当てられています。role=”banner” WAI-ARIA 支援技術にたいする マークアップらしいです。ヘッダーではこう記載するらしいです。

<div class="site-branding">

site-branding とはどうやら画像関連のクラスみたいですね。それを実行してます。

<?php if ( get_theme_mod( 'graphy_logo' ) && get_theme_mod( 'graphy_replace_blogname' ) ) : ?>

get_theme_mod その値を取り出すと言う意味らしいです。Wordpressの関数です。もし( get_theme_mod( ‘graphy_logo’ )get_theme_mod( ‘graphy_replace_blogname’ )に値があるなら以降の項目を実行しなさいと言う意味ですね。&&はどちらもその条件を満たす時と言うコードになります。

<h1 class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_theme_mod( 'graphy_logo' ) ); ?>" /></a></h1>

長いコードですが一つずつ説明していきます。h1とはもうご存知ですよね見出しです。

class=”site-logo” とはsite-logoクラスを実行しますと言う意味です。スタイルです。

a href 目で見える文字をクリックするとそのページで飛びます。その目で見える文字の対象がhome_url( ‘/’ )になります。

echo esc_url( home_url( ‘/’ ) );  echoで文字化して esc_urlでサーバーとのやり取りにフィルターを通して安全なホームのURLを取得して( ‘/’ )最後に/を付けます

esc_url WordPressの関数になりwp-includes/formatting.php内で処理されます。

rel=”home” は関係性を示すと言う意味です。決まり文句かな?

img alt=”<?php bloginfo( ‘name’ ); ?>” img画像のalt画像の説明文です。bloginfo( ‘name’ ); ダッシュボード設定一般のnameの値を取得して文字として表示しています。 ここで言うnemeはサイトタイトルです。サイトタイトルをaltで使っています。

src=”<?php echo esc_url( get_theme_mod( ‘graphy_logo’ ) ); ?>” src場所を決めてechoで文字化して esc_urlでサーバーとのやり取りでフィルターを通して安全な’graphy_logo’の値を取得しています。

<?php elseif ( get_theme_mod( 'graphy_logo' ) ) : ?>

elseif とはendifはここでifが終わると言うコードに対してelseifは又はと言う意味になります。分かり易様に見て行きましょう。条件式1※始まりのifですね。の条件を満たして実行された時以下のelseifの実行コードは破棄されます。

 

Wordpress 初心者の為のPHP解説(説明)とSEO対策7

WordPress header.php解説(説明) if関数の説明1

 

条件式1を満たさずに条件式2で条件を満たした時は条件3が破棄されます。これで分かりましたよね?勿論条件式3を満たさずにendifまで行ってしまった場合はこのif文は一切実行されません。

 

Wordpress 初心者の為のPHP解説(説明)とSEO対策8

WordPress header.php解説(説明) if関数の説明2

 

これが条件式if文の読まれ方です。非常に良く使うのでこの際シッカリ覚えましょう。では続きを説明します。

get_theme_mod( ‘graphy_logo’ ); 先頭のifで使いましたが今回はgraphy_logoの値だけの条件式です。ここではgraphy_logoに値が入っていれば以降のコードが実行される記述になります。

<div class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img alt="" src="<?php echo esc_url( get_theme_mod( 'graphy_logo' ) ); ?>" /></a></div>

if文で以降で使われた記述とほぼ一緒になります。違うのはダッシュボード→設定→一般のnameの値を取得して無いのとh1見出し1が使われていません。。つまりここでは’graphy_logo’ の文字しか表示されない事になります。後は一緒です。

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

ここで初めてh1が出てきました。site-titleのクラスを値を取得してecho esc_url( home_url( ‘/’ )安全にアドレス/を文字化リンクしてここでbloginfo( ‘name’ );サイトタイトル値を読みに行って表示しています。

<?php else : ?>

elseそれ以外の時実行されるコードになります。今までのif・elseifは()の中に条件式が入りましたがelseだけだと条件式は要らなくてif・elseifの条件式が満たされない時に実行されるコードになります。

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></?></a></h1>

html出力値:<h1 class=”site-title”><a href=”http://seoaccessup.top/” rel=”home”>初心者がもの申す</a></h1>

上記と比べて画像としての取扱がなされていないですね。imgがありません。その他は一緒です。

ここではタイトルの表示と画像処理がなされていました。そして画像もしくは文字をクリックするとホームに戻る処理がなされていましたね。タイトルロゴを使用しなければここのPHP言語を取り除くことができますね。

 

header.phpその④説明

<?php if ( ! get_theme_mod( 'graphy_hide_blogdescription' ) ) : ?>

if文ですね。 !get_theme_mod とは、頭に!(ビックリマーク)が有る事に注目して下さい。これが条件式論理演算子否定と言うコードになります。これはサーバーとのやり取りで安全に’graphy_hide_blogdescription’の値を取得して値が無ければ実行するコードになります。ここで言うgraphy_hide_blogdescriptionはサブタイトルです。

<div class="site-description"><?php bloginfo( 'description' ); ?></div>

html出力値:<div class=”site-description”>ブログ歴3ヵ月の私が何かと色々もの申してみます。</div>

site-description=クラスを読み取ります。スタイルです。

bloginfo( ‘description’ ); ダッシュボード設定一般のサブタイトルの値を取得して表示しています。ディスカッション説明文ですね。

<?php endif; ?></div>

ここで上記のif文を閉じています。また</div>で<div class=”site-branding”>も閉じています。

ここではサブタイトルを表示する項目だけのコードになります。サブタイトルを変えないのであればPHP言語を取り除く事が出来ますね。

 

header.phpその⑤説明

<div class="main-navigation-wrapper">

main-navigation-wrapperクラス読み込むます。どうも画像の重ね合わせを処理する項目みたいですね。私のブログの場合真っ白なので違いが分かり難いですが重ね合わせとはこういう事だと思います。その他に一杯重ね合わせが有りますがそれはまた別の機会で説明します。bodyの上にwrapperが有る事が分かります。そしてその上にヘッダー・サイドバー・フッターが有ります。ここではヘッダーのみの記述になりますのでヘッダー周りのwrapperになります。

 

Wordpress 初心者の為のPHP解説(説明)とSEO対策9

WordPress header.php解説(説明) Wrapperの説明

 

<nav id="site-navigation" class="main-navigation" role="navigation">

nav id=”site-navigation” nav idでsite-navigation idでsite-navigationを呼び出しています。スタイルです。

class=”main-navigation” main-navigationクラスを値を読み込みます。スタイルです。

role=”navigation” WAI-ARIA 支援技術にたいする マークアップらしいです。ここではnavigationとマークアップするみたいです。

<h1 class="menu-toggle"><?php _e( 'Menu', 'graphy' ); ?></h1>

html出力値:<h1 class=”menu-toggle”>メニュー</h1>

h1 class=”menu-toggle” menu-toggleクラスを読み込んでいます。和訳するとtoggleはON/OFF menuはメニュー私ブログの携帯モードだとメニューをクリックすると固定ページが表示される様になっているので恐らくその機能のスタイルだと思われます。

<?php _e( ‘Menu’, ‘graphy’ ); ?></h1>_eはWordpressの国際化対応関数らしいです。つまり日本なら日本語・英語圏内なら英語となるみたいですね。そしてその対象が’Menu’, ‘graphy’ になっています。

そしてh1に注目して下さい。h1は見出しです。その対象がメニューです。h1要らないです。SEO対策しておきましょう。

<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'graphy' ); ?></a>

html出力値:<a class=”skip-link screen-reader-text” href=”#content”>コンテンツへスキップ</a>

a class=”skip-link screen-reader-text” aが付いているので文字認識できるクラスみたいですね。そのクラスを読み込んでいます。

hrefはリンクを貼ると言う意味ですね。

“#content” #wrapperに紐つけされていて#wrapperの幅と同期するみたいです。その他に(#header)・(#sidebar)・(#footer)が有りその全てが#wrapperで幅が管理されているみたいです。表示している画面のサイズに合わせているのかな?後日説明します。

<?php _e( ‘Skip to content’, ‘graphy’ ); ?></a> _eは先ほどと同じですね。’Skip to content’, ‘graphy’ を状態に合わせて日本語・英語に対応します。

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

html出力値:<div class=”menu”><ul><li class=”current_page_item”><a href=”http://seoaccessup.top/”>ホーム</a></li><li class=”page_item page-item-2″><a href=”http://seoaccessup.top/seo1″>SEO対策!!初心者から始めるサーチエンジンお金儲けをしよう♪</a></li><li class=”page_item page-item-386″><a href=”http://seoaccessup.top/rental-server1″>レンタルサーバー選びと比較 無駄な出費をしない為機能詳細把握</a></li></ul></div>

<?php wp_nav_menu( ); ?> WordPressの関数になります。使い方は色々ありますが今回は指定した固定ページに絞り込んでの記載方法になります。※読みに行く場所はwp-includes/nav-menu-template.phpです。

theme_location urlを取得しに行きprimaryで固定ページ名を取得しに行ってますね。

array( ‘theme_location’ => ‘primary’ ) array(配列値=>変数);はPHPの関数で連想配列と言うものになります。一般的な使い方は配列値に整数を入れて変数に任意の変数を入力して使用します。使用例は下記の様になります。複数使う事も出来ます。

 

Wordpress 初心者の為のPHP解説(説明)とSEO対策10

WordPress header.php解説(説明) array連想配列の説明

 

<?php if ( ! get_theme_mod( 'graphy_hide_search' ) ) : ?>

if文が付いてます。

! get_theme_mod 先ほども出ましたね!が付いている事をお忘れなく

‘graphy_hide_search’ 検索値を取得してるみたいです。

<?php get_search_form(); ?>

html出力値:<form role=”search” method=”get” class=”search-form”action=”http://seoaccessup.top/”>
    <label>
     <span class=”screen-reader-text”>検索:</span>
     <input type=”search” class=”search-field” placeholder=”検索 &hellip;” value=”” name=”s” title=”検索:” />
    </label>
    <input type=”submit” class=”search-submit” value=”検索” />
   </form> 

そのままですね。検索フォームを作成します。※wp-includes/general-template.phpで実行されます。また関連ファイルでテーマのsearchform.phpも有ります。

<?php endif; ?></nav><!-- #site-navigation --></div>

endif・nav・divを閉じています。もう説明は要らないですよね。

 

header.phpその⑥説明

<?php if ( is_home() && get_header_image() ) : ?>

is_home() WordPressの関数です。今表示しているのはホームページかどうか?の確認らしいです。

get_header_image() WordPressの関数です。ヘッダー画像が登録されていれば値を取得します。

if文なのでもしホームページでヘッダー画像が登録されていれば以降の処理を実行すると言う事です。ヘッダー画像を使っていなければ省略出来ますね。

<div id="header-image" class="header-image">

header-imageにheader-imageのidを与えます。idを与えているのでstyle.cssにheader-imageと言う項目が有るはずですね。そこで高さ・幅等の指定がなされていると思います。

header-imageもWordpressの関数です。こちらはパス(アドレス)を取得している項目になります。

<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt=""></div>

お決まり見たいです。このコードでアップデートします。

divが閉じられています。

<?php elseif ( is_page() && has_post_thumbnail() ) : ?>

elseif文です。

is_page() ページの値です。

has_post_thumbnail() アイキャッチの値です。

つまりページの値とアイキャッチの値が有るならば以下の処理を行います。と言う事ですね。

<div id="header-image" class="header-image"><?php the_post_thumbnail( 'graphy-page-thumbnail' ); ?></div>

<div id=”header-image” class=”header-image”> 先ほどと同じですね。header-imageにheader-imageのidを割り当てます。

<?php the_post_thumbnail( ‘graphy-page-thumbnail’ ); ?> ‘graphy-page-thumbnail’ からthe_post_thumbnailでアイキャッチ画像を取得しますと言う意味になります。※ wp-includes/post-thumbnail-template.phpで処理で実行されます。

<?php endif; ?></header>

if文の終了です。ヘッダーの終了です。

<div id="content" class="site-content">

最後の文になります。id=”content”というidを割り当ててclass=”site-content”クラスを実行しています。

 

WordPress 初心者の為のheader.php解説(説明)は以上になります。ざくっと説明しましたがheader・phpだけでは説明しきれないですね。後日より深く説明したいと思います。ここまで読んで頂いてありがとうございます。これからも分かり易い説明をしていきますのでどうぞ宜しくお願いします。

 

関連記事一覧

SEO対策検索順位チェックツール GRC凄くお勧めする理由 
最低限必要な2つのSEO対策ツールの使い方 初心者の方必見です
SEO これぞ!!内部リンク効果的な使い方・貼り方・最適化
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です