foundationを使ったWordPressのテーマ作成手順

2017年9月18日

foundation

foundation, Theme, WordPress, XY Grid, テンプレート, テーマ

foundationを使ったWordPressのテーマ作成手順を一覧にしました。

テーマを作る度に、手順を記録しておこうと思うのですが、ついつい面倒で先延ばしにしてきました。

今回は、記憶にある手順はすべて書いておこうという試みです。同時に、参考にしたサイト等も整理しました。

新しいグリッドシステムである、XY Gridを使って、従来の方法を検証する必要もありましたので良い機会でした。

この記事では、以下の内容を書いています。

Foundation v6.4.2を使用して、WordPress v4.8.1のテーマを作成します。

1. WordPressのインストール（インストール方法の詳細は省略しています）
2. テーマの作成
3. XY Gridを使ったページの編集
4. ファイルの分割、アップロード
5. ヘッダー、コンテンツ、フッターの仕上げ
6. アイキャッチの設定

長文になっていますが、ゆっくりご覧ください。
役に立ちましたら、SNSでのリアクションをぜひお願いします。

WordPressのインストール

1. WordPressをダウンロードする

日本語ーWordPress

2. ダウンロードしたファイルを解凍して、インストール先サーバーに転送し、インストールをする。

3. インストール後、サンプルの投稿、固定ページ、コメントを削除する。

4. 固定ページを2ページ作成する。

1) タイトル: ホーム　パーマリンク: /top/
2) タイトル: 記事一覧　パーマリンク: /archive/

5. [設定]-[表示設定]-[フロントページの表示]で、[固定ページ]を選び、フロントページに[ホーム]、投稿ページに[記事一覧]を選択しておく。

テーマの作成

1. ローカルでテーマ用のフォルダを作成し、index.phpとstyle.cssを保存する。中身は空のファイルで構わない。

2. 1.で作成したフォルダを、/wp-content/themes/以下にアップロードする。

3. style.cssにテーマの情報を入力し、アップロードする。

/*
Theme Name: テーマ名
Theme URI: テーマのURI
Author: 作成者
Author URI: 作成者のURI
Description: テーマの説明
Version: バージョン情報
*/

4. [ダッシュボード]-[外観]-[テーマ]で、作成したテーマを[有効化]にする。

XY Gridを使ったページの編集

1. foundationをダウンロードする。以下のサイトから「Complete」の「Download Everything」をダウンロード。

Foundation for Sites

2. index.html、cssフォルダ、jsフォルダがダウンロードされる。

3. index.htmlをエディターで開き、<body>と最後から5行目の<script src="js/vendor/jquery.js"></script>の間のHTMLをすべて削除する。

4. lang属性をjaに変更する。

<html class="no-js" lang="ja" dir="ltr">

5. WordPressのテンプレートタグを入力する。

</head>の前に、<?php wp_head(); ?>
</body>の前に、<?php wp_footer(); ?>

6. XY Gridを使って、グリッドを作成する。

ヘッダーが2分割、コンテンツが2分割、フッターが3分割+1のグリッドです。

<!doctype html>
<html class="no-js" lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
    <?php wp_head(); ?>
  </head>
  <body>
    <div class="grid-container">
  
  <!-- header -->
   <header>
      <div class="grid-x grid-padding-x">
        <div class="medium-8 cell">header_left</div>
        <div class="medium-4 cell">header_right</div>
      </div>
   </header>
  <!-- /header -->
  
  <!-- contents -->
    <div class="contents">
      <div class="grid-x grid-padding-x">
  <!-- main -->      
        <div class="medium-8 cell">
          <main>main</main>
        </div>
  <!-- /main -->
  <!-- sidebar -->
        <div class="medium-4 cell">
          <div class="sidebar">sidebar</div>
        </div>
      </div>
    </div>
  <!-- /sidebar -->
  <!-- /contents -->
  
  <!-- footer -->
    <footer>
      <div class="grid-x grid-padding-x">
        <div class="medium-4 cell">footer_left</div>
        <div class="medium-4 cell">footer_center</div>
        <div class="medium-4 cell">footer_right</div>
      </div>

      <div class="grid-x grid-padding-x">
        <div class="cell"><small>&copy;2017</small></span></div>
      </div>
    </footer>  
  <!-- /footer -->

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

<!-- script for foundation -->
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
<!-- /script for foundation -->
    <?php wp_footer(); ?> 
  </body>
</html>

作成したグリッドです。赤枠が.grid-container、青枠が.grid-xです。左右のpaddingは自動的に空きました。

foundation 6を使ったWordPressテーマ作成グリッドのレスポンシブイメージです

smallサイズでタテに整列するレスポンシブです。

ファイルの分割

1. ファイルを分割する。

1) 先頭から、ヘッダー終了のコメントまでを切り出し、header.phpとして、テーマのフォルダ内に保存する。
2) サイドバー開始のコメントから、サイドバーの終了のコメントまでを切り出し、sidebar.phpとして、テーマのフォルダ内に保存する。
3) フッター開始のコメントから最後までを切り出し、footer.phpとして、テーマのフォルダ内に保存する。
4) 残ったindex.htmlをfront-page.phpとして、テーマのフォルダ内に保存する。

2. 分割したファイルを読み込むテンプレートタグを入力する。

front-page.phpにテンプレートタグを入力します。

<?php get_header(); ?>
  
  <!-- contents -->
    <div class="contents">
      <div class="grid-x grid-padding-x">
  <!-- main -->      
        <div class="medium-8 cell">
          <main>main</main>
        </div>
  <!-- /main -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

3. ファイルをサーバーへアップロードする。

以下のファイルとフォルダを、/wp-content/themes/下のテーマ用フォルダにアップロードします。

header.php
sidebar.php
footer.php
front-page.php
cssフォルダ
jsフォルダ

ファイルの仕上げ

アップロードしたファイルを仕上げていきます。

1. header.phpのcssへのパスを、/wp-content/themes/テーマ用フォルダ名/を追加して変更します。

    <link rel="stylesheet" href="/wp-content/themes/theme_name/css/foundation.css">
    <link rel="stylesheet" href="/wp-content/themes/theme_name/css/app.css">

2. 同様に、footer.phpのjsへのパスを、/wp-content/themes/テーマ用フォルダ名/を追加して変更します。

    <script src="/wp-content/themes/theme_name/js/vendor/jquery.js"></script>
    <script src="/wp-content/themes/theme_name/js/vendor/what-input.js"></script>
    <script src="/wp-content/themes/theme_name/js/vendor/foundation.js"></script>
    <script src="/wp-content/themes/theme_name/js/app.js"></script>

3. 変更したファイルをアップロードして、組んだグリッドが元通りに表示されていればOKです。

ヘッダーの仕上げ

1. header.phpに、description、keyword、titleを自動で生成するプログラム、およびOGP設定の別ファイルを読み込ませます。

<!doctype html>
<html class="no-js" lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php get_template_part('head_des_key_tit'); ?>
    <?php get_template_part('ogp'); ?>
    <link rel="stylesheet" href="/wp-content/themes/theme_name/css/foundation.css">

それぞれのファイルの詳細は以下です。

head_des_key_tit.php

<meta name="description" content="<?php $descrip = mb_substr(ereg_replace("(r|n|rn)","",strip_tags($post->post_content)),0,160)."...";
if(is_single()){echo $descrip;}else{bloginfo('description');}
?>">
<meta name="keywords" content="<?php $tags = get_the_tags();
if($tags){ $total = count($tags); $count = 1;
foreach($tags as $tag){ if($total == $count){echo $tag->name;}else{echo $tag->name . ', ';}
$count++;
}
}else{echo 'keywords';} ?>" />

<?php if( is_front_page() ): ?>
  <title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?></title>
<?php else: ?>
  <title><?php wp_title(''); ?> | <?php bloginfo('name'); ?></title>
<?php endif; ?>

wordpressで記事抜粋のdescriptionと記事タグをkeywordsに自動挿入するを参考にさせていただきました。

PHPのバージョンV.5.xで動きます。V.7.x以上をお使いの方は、$descrip = mb_substr(ereg_replace("(r|n|rn)"のereg_replaceをpreg_replaceに書き換えると動きます。

ogp.php

<!-- OGP -->
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
  echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 70).'">';echo "\n";//抜粋を表示
endwhile; endif;
  echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
  echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
  echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
  echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
  echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
  if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
    $image_id = get_post_thumbnail_id();
    $image = wp_get_attachment_image_src( $image_id, 'full');
    echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
  } else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
    echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
  } else {//投稿にサムネイルも画像も無い場合の処理
    $ogp_image = get_template_directory_uri().'/images/og-image.jpg';
    echo '<meta property="og:image" content="'.$ogp_image.'">';echo "\n";
  }
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
  if (get_header_image()){//ヘッダーイメージがある場合は、ヘッダーイメージを
    echo '<meta property="og:image" content="'.get_header_image().'">';echo "\n";
  } else {//ヘッダーイメージがない場合は、テーマのスクリーンショット
    echo '<meta property="og:image" content="'.get_template_directory_uri().'/screenshot.jpg">';echo "\n";
  }
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="">
<!-- /OGP -->

【WordPress】Facebook OGPプラグインの使用を止めて自前で設定したら意図通りの画像で正しくシェアされるようになったを参考にさせていただきました。

fb:app_id、twitter:siteが伏せてありますが、ご自身のものを入力してください。

2. ウィジェットを設定する。

ヘッダーの右側は、問い合わせ先、連絡先を入れることを想定しています。ファイルに直接書き込んでもいいのですが、汎用性を考えてウィジェットを設定します。ついでに、サイドバーのウィジェットも作ります。

functions.phpを作成します。エディターで以下を入力したら、functions.phpとして、テーマ用のフォルダに保存します。

<?php

if ( function_exists ('register_sidebar')){
	register_sidebar(array(
	  'id' => 'header_right',
	  'name' => 'header_right'
	  ));

	register_sidebar(array(
	  'id' => 'sidebar',
	  'name' => 'sidebar'
	  ));
}

header.php、sidebar.phpの該当箇所にウィジェットを挿入します。

header.php

  <!-- header -->
   <header>
      <div class="grid-x grid-padding-x">
        <div class="medium-8 cell">header_left</div>
        <div class="medium-4 cell">
          <?php dynamic_sidebar('header_right'); ?>
        </div>
      </div>
   </header>
  <!-- /header -->

sidebar.php

  <!-- sidebar -->
        <div class="medium-4 cell">
          <div class="sidebar">
            <?php dynamic_sidebar('sidebar'); ?>
          </div>
        </div>
      </div>
    </div>
  <!-- /sidebar -->
  <!-- /contents -->

3. functions.php、header.php、sidebar.phpをアップロードします。

4. [ダッシュボード]-[外観]-[ウィジェット]で、ウィジェットが有効になったことを確認します。

ヘッダーとサイドバーのウィジェットが設定されました。

5. サイトのタイトルと説明を設定する

続いて左側も設定します。WordPressの設定から、タイトル、サイトの説明を表示します。タイトルにはリンクが設定されます。

   <header>
      <div class="grid-x grid-padding-x">
        <div class="medium-8 cell">
          <h1 class="header_title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
          <p class="header_description"><?php bloginfo('description'); ?></p>
        </div>

6. header.phpを更新しサイトを表示して、タイトルと説明が表示されたことを確認します。

コンテンツの仕上げ

1. front-page.phpを仕上げる。

front-page.phpはトップページを表示するテンプレートです。今回は、最新の投稿を1件、表示するように設定します。

<?php get_header(); ?>
  
  <!-- contents -->
    <div class="contents">
      <div class="grid-x grid-padding-x">
  <!-- main -->      
        <div class="medium-8 cell">
          <main class="main">
            <?php $article = get_posts( 'posts_per_page=1' ); ?>
            <?php foreach($article as $post): ?>
              <?php setup_postdata($post); ?>

              <h2 class="main_title"><?php the_title(); ?></h2>
              <p class="main_article"><?php the_content(); ?>

            <?php endforeach; ?>
            <?php wp_reset_postdata(); ?>
            
          </main>
        </div>
  <!-- /main -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

2. single.phpを仕上げる。

single.phpは、個別の投稿を表示するテンプレートです。front-page.phpをコピーして作成します。
さらに、前後の投稿へ移動できるように、WordPressのテンプレートタグprevious_post_linkとnext_post_linkを使ってリンクを作成します。

<?php get_header(); ?>
<?php the_post(); ?>
  
  <!-- contents -->
    <div class="contents">
      <div class="grid-x grid-padding-x">
  <!-- main -->      
        <div class="medium-8 cell">
          <main class="main">

              <h2 class="main_title"><?php the_title(); ?></h2>
              <p class="main_article"><?php the_content(); ?>

          <!-- previous or next link -->
            <div class="page_link clearfix">
            <span class="float-left">
            <?php previous_post_link('&laquo; %link','前の記事'); ?>
            </span>
            <span class="float-right">
            <?php next_post_link('%link &raquo;','次の記事'); ?>
            </span>
            </div>
          <!-- /previous or next link -->

          </main>
        </div>
  <!-- /main -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

テンプレートタグ/previous posts link
テンプレートタグ/next posts link

3. index.phpを仕上げる

index.phpで、投稿の一覧を表示します。テーマの作成で最初に作成したindex.phpを使用します。さらに、アーカイブ表示用にarchive.phpを作成します。今回は、とりあえず同じ中身で作成しておきます。

一覧ページ、アーカイブページには、ページネーションを作成します。WordPressの投稿ページネーション関数（the posts pagination）を使用します。

<?php get_header(); ?>
  
  <!-- contents -->
    <div class="contents">
      <div class="grid-x grid-padding-x">
  <!-- main -->      
        <div class="medium-8 cell">
          <main class="main">

            <?php while ( have_posts()): ?>
              <?php the_post(); ?>

              <h2 class="main_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
              <p class="main_article"><?php the_excerpt(); ?>

            <?php endwhile; ?>

          <!-- pagenation -->
            <?php the_posts_pagination(); ?>
          <!-- /pagenation -->
            
          </main>
        </div>
  <!-- /main -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

css/style.css

.pagination h2.screen-reader-text {
  display: none;
}
div.nav-links a {
	display: inline-block;
}
div.nav-links {
	margin-top: 3rem;
	text-align: center;
}

関数リファレンス/the posts pagination

4. front-page.php、single.php、index.php、archive.phpをアップロードします。

5. 動作を確認する。

1) WordPressをインストールしたURLにアクセス　→　最新の記事が表示される
2) WordPressをインストールしたURL/archive/にアクセス　→　投稿一覧が表示される
3) 投稿一覧から一つの記事をクリック　→　単体の記事が表示される

フッターの仕上げ

「ページトップへ戻る」リンクを作成する。

footer.php

  <!-- footer -->
    <footer>
      <div class="grid-x grid-padding-x">
        <span class="pagetop"><a href="#">PAGE TOP</a></span>
        <div class="medium-4 cell">footer_left</div>

css/style.css

footer div.grid-x {
	position: relative;
}
span.pagetop {
	display: block;
	background: #00bfff;
	position: absolute;
	top: 0;
	right: 0;
	margin-top: -1.5rem;
	padding: 5px;
}
span.pagetop a {
	color: #fff;
}

アイキャッチの設定

アイキャッチ画像を使用するには、以下の2点の作業が必要です。

1. functions.phpにadd_theme_support('post-thumbnails');を追加する

2. アイキャッチを表示したい場所に、<?php the_post_thumbnail(); ?>を入力する

とりあえず、front-page.phpとsingle.phpに、<?php the_post_thumbnail(); ?>を書いておきます。

          <main class="main">
              <?php the_post_thumbnail(); ?>
              <h2 class="main_title"><?php the_title(); ?></h2>
              <p class="main_article"><?php the_content(); ?>

レスポンシブなグローバルナビゲーションの設定

最後に、グローバルナビゲーション、いわゆるメニューを作ります。
WordPressの機能としてメニューを作成することもできますが、今回は、foundationの機能でレスポンシブなメニューを作ります。

1. header.phpを開き、headerを閉じたあとにnavを作ります。navはheaderに含まれるだろというご指摘もあると思いますが、それでも構いません。

   </header>
  <!-- /header -->
  <!-- nav -->

  <nav class="nav">
  <div class="title-bar" data-responsive-toggle="global-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
  </div>

  <div class="top-bar" id="global-menu">
    <div class="top-bar-left">
      <ul class="vertical medium-horizontal menu">
        <li><a href="/">ホーム</a></li>
        <li><a href="/archive/">記事一覧</a></li>
      </ul>
    </div>
  </div>
　 </nav>

  <!-- /nav -->

2. 以上でメニューが完成です。画面の幅をせばめるとメニューが変化します。色はCSSで整えてください。

と、駆け足でテーマ作成手順を見てきました。これで大枠はできていますので、中に文字を入れたり、CSSでデザインを整えたりして制作していきます。