2018-08-21

【超入門】最小構成のWordpressテーマを作る

超入門 Wordpress

f:id:hollywis:20180821023904p:plain

のすけです。

前回はWordpressテーマの構成について触れました。

hollywis.hatenablog.com

今回はWordpressテーマを作っていきたいと思います。それも最小の。

レイアウトを決める

まず実現したいレイアウトを決めます。今回は最小構成ということでHTMLはこんな感じにします。

<!DOCTYPE html><!--html宣言-->
<html lang="ja"><!--日本語指定-->
<head>
  <meta charset="UTF-8"><!--エンコード：UTF-8指定 -->
  <title>サイトのタイトル</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定-->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し-->
</head>
<body>

  <header class="site-header">
    ヘッダーをここに記述
  </header>
  <div class="container">
    <div class="wrap">
        <!-- このあたりから上の行をheader.phpに切り出すのが一般的 -->
        <div id="primary" class="main">
            メイン部分
          <article class="entry">
            <h2 class="entry-head">タイトル</h2>
            <div class="entry-body">
              <p>本文</p>
            </div>
          </article>
          <article class="entry">
            <h2 class="entry-head">タイトル</h2>
            <div class="entry-body">
              <p>本文</p>
            </div>
          </article>
          〜
        </div>
        <aside id="scecondary" class="site-side">
          サイドバーをここに記述
           <!-- (sidebar.phpに切り出すのが一般的)-->
        </aside>
        </div>
  </div>
  <!-- このあたりから下の行をfooter.phpに切り出すのが一般的-->
  <footer class="site-footer">
    フッターをここに記述
  </footer>
</body>
</html>

これをphp化していきます。

最小のテーマ構成ファイル準備

必要なのはこの２つです。

index.php
style.css

そして、一応テーマのサムネイル画像も用意しましょう

screenshot.png

HTMLでは、header.phpやfooter.phpにも触れていますが今回は、最小テンプレートということで、全部index.phpに入れてしまいます。

分割は、必要なタイミングで順次やっていくほうが構成を覚えられて良いと思います。既存のテーマを見て分かるかと思いますが、ファイルが多すぎて何が何やら把握するのが難しいです。一度テーマを作ったことのある人なら問題ないのでしょうが、初心者には厳しいかと思います。そこで、最小のテンプレートを作っていき、これをどんどん肉付けしていくことで構造を把握する形を取ります。

それでは作成していきましょう。

まず、ディレクトリを作成して、３つのファイルを配置していきます。

テーマ名は[anotherskyにしました]

f:id:hollywis:20180817160020p:plain

「index.php」と「style.csss」は最初は空で大丈夫です。

「screenshot.png」は「横880px・縦660px」の適当な画像を用意しましょう。

f:id:hollywis:20180817160135p:plain

index.phpにHTMLを記述する

上記HTMLをindex.phpとして保存して配置します。

style.cssを記述する

次のように記載していきます。cssの記載はざっくりレイアウトのみ記載しました。

/*
Theme Name: AnotherSky
Theme URI: http://hollywis.hatenablog.com/
Author: hollywis
Author URI: http://hollywis.hatenablog.com/
Description: AnotherSkyは最小限のWordpressテーマです。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*--------------------------------------------------------------
　Layout
--------------------------------------------------------------*/
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.site-header {
    height: 100px;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.container{
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.site-footer{
    height: 100px;
}

.wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    padding-left: 2em;
    padding-right: 2em;
}

.wrap:after {
    clear: both;
    content: "";
    display: block;
}

#primary {
    float: left;
    width: 58%;
    border-right: 1px solid rgba(0,0,0,0.2);
}

#scecondary {
    float: right;
    padding-top: 0;
    width: 36%;
}

テーマを有効にしてみる

管理画面の[外観]-[テーマ]から作成したテーマを有効にします。

f:id:hollywis:20180821011753p:plain

するとテーマが反映されて、index.phpが表示されます。 f:id:hollywis:20180821012432p:plain

上からヘッダー、メイン部分、サイドバー、フッターと表示されているかと思います。

ただし、これではサイトタイトルやWordpressに投稿した記事は反映されていない静的なHTMLになってしまっています。そこで、Wordpressのコードを「index.php」に埋め込んでいきます。

index.phpにWordpressのコードを入れる

index.phpの内容を次のように変更します。

<!DOCTYPE html><!--html宣言-->
<html lang="ja"><!--日本語指定-->
<head>
  <meta charset="UTF-8"><!--エンコード：UTF-8指定 -->
  <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定-->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し-->
  <?php wp_head(); ?><!--headの追加コード -->
</head>
<body>

  <header class="site-header">
    <h1><?php bloginfo('name'); ?></h1>
    ヘッダーをここに記述
  </header>
  <div class="container">
    <div class="wrap">
        <!-- このあたりから上の行をheader.phpに切り出すのが一般的 -->
        <div id="primary" class="main">
            メイン部分
          <?php if(is_home()) : ?><!--メインページの時 -->
              <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
              <article class="entry">
                <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-body">
                  <?php the_content(); ?>
                </div>
              </article>
              <?php endwhile; endif; ?>
          <?php elseif(is_single()) : ?><!-- 投稿ページの時 -->
            <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          <?php elseif(is_page()) : ?><!-- 固定ページの時 -->
              <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title() ?></h1>
            <div>
              <?php the_content(); ?>
            </div>
            <?php endwhile; ?>
          <?php endif; ?>
          
        </div>
        <aside id="scecondary" class="site-side">
          サイドバーをここに記述
           <!-- (sidebar.phpに切り出すのが一般的)-->
        </aside>
        </div>
  </div>
  <!-- このあたりから下の行をfooter.phpに切り出すのが一般的-->
  <footer class="site-footer">
    フッターをここに記述
  </footer>
  <?php wp_footer(); ?><!--footerの追加コード -->
</body>
</html>

bloginfo('name');はブログの名前を取得 wp_title(' | ', true, 'right');はタイトルを取得して右に|を追加

また表示内容をif~elseifの条件分岐で出し分けています。

is_home()でメインページの時の表示の記述
is_single()で投稿ページの時の表示の記述
is_page()で固定ページの時の表示の記述をしています。

関数の意味はWordpressCodex日本語版にて確認してください。

この出し分けは、それぞれ「front-page.php」、「single.php」、「page.php」に切り出すことで明示的に条件分岐を書かなくても良くなりますが、今回はindex.phpに詰め込みました。

■メインページを表示した時

f:id:hollywis:20180821024254p:plain

■投稿ページを表示した時

f:id:hollywis:20180821024250p:plain

■固定ページを表示した時

f:id:hollywis:20180821024244p:plain

これで、最小のテーマの完成です。

画像の表示がないなどまだまだ実用に耐えないテーマではありますが、テーマの構成が分かりやすく、学習しやすいものになったのではないでしょうか。

続く

2018-08-20

WordpressのデバッグモードをONにする

Wordpress

Wordpressをカスタマイズする際に、デバッグしたいですよね。

そんな時は、エラーを画面に表示するようにデバッグモードをONにしましょう。

設定ファイルはwp-config.php

次のように設定しましょう。

define('WP_DEBUG', true);

デバッグモードをOFFにしたい場合は、次のようにします。

define('WP_DEBUG', false);

ログに出力する

ログに出力したい場合には、さらに次のようにします。

define('WP_DEBUG', true); //デバッグモードON
if (WP_DEBUG) { //デバッグモードONの場合
  define('WP_DEBUG_LOG', true); //debug.logファイルに保存
  define('WP_DEBUG_DISPLAY', false); //画面に表示しない
}

上記のように設定した場合、wp-contentフォルダに「debug.log」というファイルができてそこにエラーが記録されていくようになります。

2018-08-16

テーマを作る -　テーマを構成するファイル群

Wordpress

Wordpressの凄い点は、まるで着せ替えのようにデザインを変える事ができる事です。

これをテーマと呼びます。

テーマのインストール画面

管理画面から、初期インストールの「twentyfifteen」「twentysixteen」「twentyseventeen」を選ぶこともできますし、世界中のデザイナーがデザインしたテーマを探して来て、インストールする事ができます。

f:id:hollywis:20180816155541p:plain

テーマを新規に入れる事ができる画面

個別のテーマのディレクトリの位置とファイル構成

f:id:hollywis:20180816155756p:plain

「wo-content/themes/」の以下にテーマ毎のディレクトリがあり、その下にテーマファイル群が配置されています。

テーマは既存のものを入れることもできますが、もちろん自作することも可能です。

テーマに必要なファイルは次の通りです。

index.php メインテンプレート
style.css テーマのcss

最低限、この2つがあればテーマは作成できます。

さらに、より高機能にしたい場合には

function.php 関数ファイル
search.php 検索ページ
404.php 404ページ
画像ファイル

など様々に追加できます。

なお、参考までに「twentyseventeen」のテーマファイル群は次の通りです。

f:id:hollywis:20180816160336p:plain

ページのパーツ毎に切り出されてそれぞphpファイルになっているのが分かるかと思います。ちなみにphpとはhtmlにプログラム機能を付加した凄いやつです。１つのphpファイルには「html」と「phpプログラム」の両方が記載されています。

それぞれのファイルの意味は次の通りです。(すでに紹介したもの以外)

header.php ヘッダー部分
footer.php フッター部分
sidebar.php サイドバー部分
archive.phpはアーカイブページ
comments.php コメント欄
front-page.php フロントページ
page.php 固定ページ
single.php 投稿ページ
image.php 画像を入れた時の部分
searchform.php 検索ボックス
README.txt テーマの説明
rtl.css アラビア語やヘブライ語のように右から左へ記述する言語用のcss
screenshot.png テーマのサムネイル画像
assets 画像、CSS、Javascript群
template-parts 再利用可能なテンプレート群
inc テーマ固有の追加コード群

といった感じです。

案外シンプルな構成になっています。では、次回からテーマを実際に作っていきたいと思います。

続く

2018-08-15

Wordpressをローカルテスト環境にインストール

Wordpress

まず、MySQLに新しいDBを追加します。

追加をするためには、MySQLにアクセスしてDBを新しく追加します。 mysqlコマンドを利用する方法もありますが、ここでは便利なアプリを利用します。

MAMPではphpMyAdminが自動インストールされるので、そちらからDBを追加するのも良いかと思います。 f:id:hollywis:20180814145043p:plain

オススメはMacの場合は『Sequel Pro』です。 https://www.sequelpro.com/　

f:id:hollywis:20180814145358p:plain

Windowsでは『MySQL Workbench』がオススメです。 https://dev.mysql.com/downloads/workbench/

phpMyAdminだとUIが分かりにくいので、専用のアプリを入れることをオススメします。

ここからは『Sequel Pro』を使って説明していきます。

f:id:hollywis:20180814144830p:plain

データベースを追加から進みます。

f:id:hollywis:20180814144820p:plain データベースの名前を任意に設定します。文字コードは日本語を使う場合、『utf8mb4』を選びます。 UTF8は寿司ビール問題など問題があるため、utf8mb4を選んでおきましょう。

※のすけは以前AWS環境でMySQLを利用している際に文字コードを『utf8』にしてしまい。日本語が文字化けるという問題が発生し、DBを再作成しレプリケーションしなくてはいけない事があり大変でした。ここは忘れずに『utf8mb4』にしましょう。

f:id:hollywis:20180814144825p:plain DBを作成したら、接続します。ホスト名、パスワードを入力して接続します。 (MAMPを利用している場合には、Welcome画面にMySQL接続設定が書かれています) f:id:hollywis:20180814140540p:plain

次にWordpressのインストールです。 Wordpressは最新版を利用することが肝心です。なぜなら、世界中で利用されておりセキュリティパッチの更新も頻繁なため最新版ではないとセキュリティ的に脆弱になってしまう懸念があるからです。

こちらから入手はこちらから https://ja.wordpress.org/download/

ダウンロードしたら、MAMPの環境にインストールしていきます。

f:id:hollywis:20180814132419p:plain

解答したwordpressの中身をドキュメントルートのhtdocsの下にコピーして任意の名前にリネームします。(画像ではlocaltestにしました)

そして、ブラウザでアクセスします。 f:id:hollywis:20180815145316p:plain URLはMAMPのURLの[MAMP]という部分をリネームしたフォルダ名にします。「http://localhost:8888/ここにフォルダの名前/」画像では次の通りです。

http://localhost:8888/localtest/

Wordpressのインストール画面ができてたら正解です。

次に画面を進めてインストール作業を行なっていきます。

f:id:hollywis:20180815145700p:plain 途中で出て来るDBの設定は、先ほど作成したMySQLのDBの設定値を入力していきます。テーブル接頭辞は[wp_]で良いでしょう。

f:id:hollywis:20180815145704p:plain 接続に成功すれば、インストール実行を押します。

f:id:hollywis:20180815150054p:plain ここで、サイトのタイトルやユーザ名を入力します。重要な点として、実際にインターネットのサーバ上にwordpressをインストールする場合にはユーザ名にはrootやadminなど分かりやすいものは利用しないことです。 固有のユーザ名を利用しましょう。adminなどを利用してしまうと容易に推測できてしまうので攻撃されやすくなります。 ※MAMPにインストールする場合は問題ありません。

f:id:hollywis:20180815150525p:plain ログイン画面からログインすることで管理画面に行くことができます。

f:id:hollywis:20180815150630p:plain また、ルートアドレスに移動するとWordpressのトップ画面が表示できました。

http://localhost:8888/localtest

今回はここまで。以上Wordpressのインストールでした。

ではまた。

2018-08-14

Wordpressローカルのテスト環境を用意して開発に備える

Wordpress

ローカルテスト環境とは、自分のPCの内部にサーバを立てて、プログラムを作成とテストをしていくための場所です。プロダクション環境では、インターネットにアクセス可能な状態で公開されてしまいますので、あまり好ましくありません。また、一旦リリースした後でも、追加で新しいコンテンツの追加などを継続的に行っていくためにも、テスト環境が必要です。

そこで、自分のPCの内部にサーバを立てて、テストをしやすくします。これで、いつでもどこでもプログラムの作成や検証ができるようになります。

実際、多くの人がご自分のPCにローカル開発環境にサーバを立ててテストをしており便利なツールも出てきています。それが『MAMP』です。

f:id:hollywis:20180814133355p:plain

その他にもWindowsではXAMPPというツールも有名です。 XANPPやMAMPを入れる理由は、WEBサーバ環境を独自に簡単にインストールできるからです。

名前の由来は、「XAMPP」がX:クロスプラットフォーム、Apache、MySQLまたはMariaDB、PHP、Perlの頭文字を。「MAMP」がMacintosh, Apache, MySQL, PHP の頭文字を繋げた名前です。ちなみにMAMPはWebサーバとしてNginx、言語としてPythonも選べるのでより現代的です。 ※MAMPは今はWindows版もリリースされています。