求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

WordPressのテンプレートファイル化する

WordPressのテンプレートファイル化する

f:id:web-design-lesson:20181028153619j:plain

  • テーマフォルダー「samplecafe」を作成
  • 「index.php」「style.css」をテーマフォルダー内に作成
style.cssにコメントを記述
/*
Theme Name: SampleCafe
Description: HTMLからWordPressのThemeを作る
*/
  • 「screenshot.jpg」を作成する

テーマを有効化

f:id:web-design-lesson:20181028153706j:plain

WordPressテンプレートタグの記述

get_template_directory_uri … テンプレートのあるディレクトURI を取得します。つまりテーマディレクトリです。
get_stylesheet_uri … style.cssURI を取得します。

<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="style.css" media="screen">
  • 以下のように変更する
<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">
  • CSSが適用されたプレビュー

f:id:web-design-lesson:20181028161610j:plain

WordPressの構造に合わせて分割する

ヘッダー部分を分割

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Home | Sample Cafe</title>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body>
<header class="header">
  
<div class="container">
<div class="siteinfo">
<h1 class="logo">
<a href="#"><span>Sample Cafe</span></a>
</h1>
<p class="description">ケーキとコーヒーのおいしいお店を紹介するブログ</p>
</div><!-- /.alignleft -->

<div class="searchblock">
<form action="#" method="get" class="searchform">
<input type="text" placeholder="検索" name="search" class="search"><i class="fa fa-search" aria-hidden="true"></i>
</form>
</div><!-- /.alignright -->
</div><!-- /.container -->

<nav class="gnav">
<div class="container">
<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><!-- /.container -->
</nav>
</header><!-- /.header —>

index.phpのヘッダー部分

get_header … header.php を読み込む

<?php get_header(); ?>
サイドバー部分を分割

sidebar.php

<div class="sidebar">
<div class="widget">
<h2>Category</h2>
<ul>
<li><a href="#">ケーキ</a></li>
<li><a href="#">コーヒー</a></li>
</ul>
</div><!-- /.widget -->
<div class="widget">
<h2>Recent Posts</h2>
<ul>
<li><a href="#">ミル・クレープ</a></li>
<li><a href="#">いちごショート</a></li>
<li><a href="#">カプチーノ</a></li>
<li><a href="#">生チョコレートケーキ</a></li>
<li><a href="#">フルーツタルト</a></li>
</ul>
</div><!-- /.widget -->
<div class="widget">
<h2>Archive</h2>
<ul>
<li><a href="#">2018年9月</a></li>
<li><a href="#">2018年8月</a></li>
</ul>
</div><!-- /.widget -->
</div><!-- /.sidebar -->

index.phpのサイドバー部分

get_sidebarsidebar.php を読み込む

<?php get_sidebar(); ?>
フッター部分を分割

footer.php

</div><!-- /.container -->

<div class="footer">
<p class="copyright">&copy; Sample Cafe</p>
</div><!-- /.footer -->
</body>
</html>

index.phpのフッター部分

get_footer … footer.php を読み込む

<?php get_footer(); ?>
  • テーマフォルダー内のファイル構成

f:id:web-design-lesson:20181028164033p:plain

header.php を編集しよう

サイト名と紹介文の部分

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

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

f:id:web-design-lesson:20181028170017p:plain

検索フォーム
  • 「searchform.php 」といファイル名で保存し、読み込む

get_search_form()

<form action="<?php echo home_url('/'); ?>" method="get" class="searchform">
<input type="text" placeholder="検索" name="search" class="search"><i class="fa fa-search" aria-hidden="true"></i>
</form>


※今回は、ウィジェットで「検索」の機能を追加します。

ナビゲーション部分

  • 基本的には「固定ページ名」を表示する
<?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>

サイドバー部分

functions.php を作る
  • 「functions.php」を作成します
<?php

register_sidebar( array(
  'name' => 'サイドバーウィジット-1', 
  'id' => 'sidebar-1', 
  'description' => 'サイドバーのウィジットエリアです。', 
  'before_widget' => '<div id="%1$s" class="widget %2$s">', 
  'after_widget' => '</div>', 
) );

add_theme_support( 'menus' );

register_nav_menu( 'header-navi', 'ヘッダーのナビゲーション' );

?>
sidebar.php を編集
<div class="sidebar">
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : 
dynamic_sidebar( 'sidebar-1' ); 
else: ?> 
<div class="widget">
<h2>No Widget</h2>
<p>ウィジェットは設定されていません。</p>
<?php endif; ?>
</div><!-- /.widget -->
</div><!-- /.sidebar -->