読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

header.php を編集

header.php を編集

  • サイト名
  • 紹介文
  • 検索フォーム
  • ナビゲーション
サイト名と紹介文の部分
  • HTML – サイト名と紹介文の部分
<h1 id="logo">
<a href="#"><span>Simple x Simple</span></a>
</h1>
<p id="description">Just another WordPress site</p>

TEMPLATE TAG

bloginfo('name') … サイト名を表示する
bloginfo('description') … 紹介文を表示する
home_url() … トップページの URL を取得する

header.php(一部)

<h1 id="logo">
<a href="<?php echo home_url('/'); ?>"><span><?php bloginfo('name'); ?></span></a>
</h1>
<p id="description"><?php bloginfo('description'); ?></p>


f:id:webmaster-web:20160625125129p:plain

f:id:webmaster-web:20160625125203p:plain

検索フォーム
<form method="get" id="searchform" action="#">
<input type="text" placeholder="検索" name="s" id="s">
<input type="submit" id="searchsubmit" value="">
</form>

header.php(検索フォームの部分)

  • 書き換える部分は、action 属性の中の送信先 URL です
  • home_url() でトップページの URL を取得する
  • 検索フォームで注意するのは、name 属性の値です
<form method="get" id="searchform" action="<?php echo home_url('/'); ?>">
<input type="text" placeholder="検索" name="s" id="s">
<input type="submit" id="searchsubmit" value="">
</form>

検索フォーム自体を部品化

  • searchform.phpを作成
  • header.php の方では、get_search_form() と記述して読み込むようにします
<div class="alignright">
<?php get_search_form(); ?>
</div>
ナビゲーション部分
<!-- Navigation -->
<div>
<ul class="menu">
<li class="current_page_item"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a>
<ul class="sub-menu">
<li><a href="#">CHILD#1</a></li>
<li><a href="#">CHILD#2</a></li>
<li><a href="#">CHILD#3</a></li>
</ul>
</li>
</ul>
</div>
<!-- /Navigation -->
header.php – ナビゲーションの部分
<!-- Navigation -->
<?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
<!-- /Navigation -->


固定ページをナビゲーションとして表示する

  • div タグに menu というクラスがつく

wp_nav_menu … ナビゲーションを表示する


f:id:webmaster-web:20160625134552p:plain

f:id:webmaster-web:20160625134643p:plain

<head>内
  • <title> タグの部分を書き換える
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
</head>
header.php(<title> 部)
<title><?php bloginfo('name'); ?></title>


しかしこのままでは、全部のページのタイトルがサイト名になってしまします。
そこで「wp_title()」というテンプレートタグを合わせて使います。

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

wp_title … ページのタイトルを出力

  • 「ページタイトル | サイト名」というふうに出力されます
JavaScript ファイルの読み込み
  • コメント欄で必要になる
...省略...
<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
</head>
</head> の前に、wp_head() と書き加えます
  • WordPress が <head> 部分を出力する際に、状況に応じて必要なコードを自動で出力するために必要な記述です
<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
<?php wp_head(); ?>
</head>
広告を非表示にする