概要

環境

  • OS X 10.11 El Capitan
  • Vagrant 1.8.1
  • VirtualBox 5.0.20
  • CentOS 7.2.1511
  • Apache 2.4.6
  • PHP 5.6.21
  • MySQL 5.7.16
  • WordPress 4.6.1 日本語版
  • ドメイン: http://dev.example.com/wordpress

範囲

  • Setup
  • 管理画面の使い方
  • 基本的な使い方
  • シンプルなテーマの作り方

ローカルのHostsファイル設定

$ sudo vi /private/etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1     localhost
192.168.33.10   dev.example.com

Apacheのmod_rewriteモジュール有効化

  • httpd.confに下記を追記(コメントアウトされている場合はコメントアウト解除)
$ sudo vi /etc/httpd/conf/httpd.conf
LoadModule rewrite_module modules/mod_rewrite.so
  • httpd.confに下記を追記
<Directory "/var/www/html/wordpress">
    Options FollowSymLinks
    AllowOverride All
    Order Allow,Deny
    Allow from all
</Directory>

WordPressをインストールしよう

  • MySQLテーブルを作成(データベース名: example_wordpress / ユーザー名: dbuser)
mysql> create database example_wordpress;
mysql> grant all on example_wordpress.* to dbuser@localhost identified by 'your password';
  • wordpress を DocumentRoot 配下に展開
  1. 公式サイト(日本語版)より最新版の wordpress-4.6.1-ja.zip をローカルにダウンロード&解凍
  2. 解凍した wordpress フォルダを仮想マシンのホームディレクトリ(/home/vagrant)に複製
  3. wordpressフォルダをDocumentRoot配下(/var/www/html)に移動
  4. wordpressディレクトリの所有者をapacheに変更
  • WordPressインストール(DB接続設定)
  1. ブラウザから http://dev.example.com/wordpress/ へアクセス
  2. 画面に沿ってDB接続情報(データベース名 / ユーザー名 / パスワード 等)を入力
  • サイトのタイトル: My first WordPress
  • ユーザー名: yuji
  • メールアドレス: xxx@xxx.com

ダッシュボードを使ってみよう

  • 記事(Posts):記事、カテゴリー、タグの追加
  • メディア(Media):ファイルのアップロード
  • 固定ページ(Pages):時系列ではなく常に表示させたいページの作成
  • コメント(Comments)
  • 外観(Appearance)
    • テーマ(Themes):テーマの検索、追加、切り替えが可能
    • ウィジェット(Widgets):テーマのサイドバーに表示させる様々なパーツの管理
    • テーマ編集(Editor):テーマをHTML/CSS/PHP等で編集可能
    • メニュー(Menus):テーマによって変わる
    • ヘッダー(Header):テーマによって変わる
    • 背景(Background):テーマによって変わる
  • プラグイン(Plugins):便利な拡張機能を追加(追加/削除、有効化/無効化)可能
  • ユーザー(Users):記事の投稿者などユーザーを追加可能
  • ツール(Tools):プラグインによって変わる

WordPressの設定をしてみよう

  • 設定(Settings)
    • 一般(General):インストール時に指定した設定内容、日付や時間のフォーマットなど
    • 投稿設定(Writing):
    • 表示設定(Reading):1ページ何件表示するかなど
    • ディスカッション(Discussion):コメントどうするかどうか(承認するかどうかなど)
    • メディア(Media):アップロードする画像のサイズどうするか設定など
    • パーマリンク(Permalinks):記事のURLをどうするか
  • パーマリンクの設定変更(スラッグ(slug)=記事を表す短い文字列 を指定)
  1. デフォルト(Plain)→日付と投稿名(Day and name)に変更
  2. 変更を保存(Save Changes) wordpress ディレクトリ配下に .htaccess ファイルが自動的に生成
  • 画像をアップロードできるようにする
  1. wp-content 配下に uploads というディレクトリを作成
  2. パーミッションを 777 に変更
$ sudo mkdir uploads
$ sudo chown -R apache:apache uploads
$ sudo chmod 777 uploads
  • カテゴリーの追加
  • カテゴリ名:Diaries / スラッグ(slug)名:diary
  • カテゴリ名:Meals / スラッグ(slug)名:meal

記事を投稿してみよう

  1. 投稿記事(All Posts) >> 新規追加(Add New)
  2. メニューを閉じる(Collasp menu)
  3. 表示オプション(Screen Options) >> スラッグ(Slug) にチェック
  4. 記事を作成
  5. カテゴリを選択
  6. スラッグを入力
  7. 公開 エディタは2種類:ビジュアル(Visual)とテキスト(Text)

スラッグを含むURLで記事にアクセスして404 Not Foundエラーとなる場合は .htaccess の内容に不備があるか mod_rewrite が有効化されていない可能性あり

固定ページを作ってみよう

  1. 固定ページ >> 新規追加
  2. 表示オプション(Screen Options) >> スラッグ(Slug) にチェック
  3. 記事を作成
  4. スラッグを入力
  5. 公開

ゼロからテーマを作ってみよう

  1. index.html / CSS を作成
  2. WPのテーマに変換
  3. index.phpを完成させる
  4. single.php(個別ページ)/ page.php(固定ページ)を作成
  • 画像を用意
    • noimage.png:イメージ画像が無い記事のアイキャッチ画像(100 x 100 px)
    • scrennshot.png:スクリーンショット(600 x 450 px 推奨)
  • index.html / style.css 作成
mysite
|--img
|  |--noimage.png
|--index.html
|--screenshot.png
|--style.css

index.html / style.css 作成

  • index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>My first WordPress</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <div id="header" class="container">
    <h1><a href="">My first WordPress</a></h1>
    <ul class="menu">
      <li><a href="">menu</a></li>
      <li><a href="">menu</a></li>
      <li><a href="">menu</a></li>
    </ul>
  </div> <!-- /header -->
    <div id="main" class="container">
      <div id="posts">
        <div class="post">
          <div class="post-header">
            <h2>
              <a href="">タイトル</a>
            </h2>
            <div class="post-meta">
              2016年11月11日【カテゴリ】
            </div>
          </div>
          <div class="post-content">
            <div class="post-image">
              <img src="img/noimage.png" width="100" height="100">
            </div>
            <div class="post-body">
              <p>本文。本文。本文。本文。本文。本文。本文。本文。<p>
            </div>
          </div>
        </div> <!-- /post -->
        <div class="navigation">
          <div class="prev">prev</div>
          <div class="next">next</div>
        </div>
      </div> <!-- /posts -->
        <div id="sidebar">
          <div class="widget">
            <h3>カテゴリー</h3>
            <ul>
              <li><a href="">item</a></li>
              <li><a href="">item</a></li>
              <li><a href="">item</a></li>
            </ul>
          </div>
        </div> <!-- /sidebar -->
    </div> <!-- /main -->
  <div id="footer" class="container">
    footer
  </div>
</html>

CSS Reset の URL (provided by Yahoo): http://yuilibrary.com/yui/docs/cssreset/

  • style.css
body {
    font-size: 14px;
    font-family: Arial, Verdana;
}

a {
    text-decoration: none;
}

p {
    padding-bottom: 14px;
    margin: 0;
    line-height: 1.8;
}

  .container {
      width: 600px;
      margin: 0 auto;
      overflow: hidden;
  }

/* header */

#header {

}

   h1 {
      font-weight: bold;
      font-size: 18px;
      padding: 15px;
  }

  .menu {
      background: #f39800;
      margin-bottom: 30px;
      font-size; 12px;
      list-style: none;
      overflow: hidden;
      padding 0;
  }

    .menu > li {
        float: left;
        width: 150px;
        text-align: center;
    }

    .menu a {
        padding: 10px 0;
        color: #fff;
        display: block;
    }

    .menu a:hover {
        background: #ffc35c;
    }

/* posts */

#posts {
    float: left;
    width: 435px;
}

  .post {
    margin-bottom: 30px;
  }

    .post-header {
      margin-bottom: 15px;
    }

      .post-header h2 {
        font-size: 16px;
        font-weight: bold;
      }

      .post-meta {
        font-size: 12px;
        padding: 7px 0;
        color: #555;
      }

    .post-content {
      overflow: hidden;
    }

      .post-image {
        float: left;
        width: 115px;
      }

      .post-body {
        margin-left: 115px;
      }

/* navigation */

.navigation {
  overflow: hidden;
  padding: 10px 0;
  font-size: 12px;
  margin-bottom: 15px;
}

  .prev {
    float: left;
    width: 200px;
  }

  .next {
    float: right;
    width: 200px;
    text-align: right;
  }

/* sidebar */

#sidebar {
    float: right;
    width: 150px;
}

.widget {
  margin-bottom: 25px;
}

  .widget h3 {
    font-weight: bold;
    padding-bottom: 7px;
  }

  .widget li {
    line-height: 1.8;
  }

/* footer */

#footer {
    padding: 15px 0;
    font-size: 12px;
    color: #aaa;
    border-top: 1px solid #ccc;
}

WordPressテーマに変換しよう

1. index.html -> index.php にファイル名変換
2. style.css にヘッダ情報追加 https://codex.wordpress.org/Theme_Development よりコピーして編集

/*
Theme Name: Example
Theme URI: http://dev.example.com
Author: Yuji Shimojo
Author URI: http://dev.example.com
Description: Example
Version: 1.0

*/

3. wordpress/wp-content/themes 配下に example ディレクトリ作成
4. WordPressダッシュボードのテーマ一覧に表示される この時点ではテーマを有効化してもCSSが適用されていない
5. 空の header.php / footer.php / sidebar.php / functions.php を作成

ファイルを分割していこう

  • header.php
  1. index.phpの行頭〜<!-- /header -->までを header.phpに Cut & Paste
  2. index.phpの該当箇所に <?php get_header(); ?> を追記
  3. style.css 読み込み部分をテンプレートタグを利用した記法に変更
  4. <title></title> 内をテンプレートタグを利用した記法に変更
  5. <h1></h1> 内をテンプレートタグを利用した記法に変更しリンク先をホームに指定
  6. functions.php に add_theme_support 関数を追加後、<ul>〜</ul> を <?php wp_nav_menu(); ?> に置き換え
  7. 行末に <?php wp_head(); ?> を追記
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
  </head>
  <div id="header" class="container">
    <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
    <?php wp_nav_menu(); ?>
  </div> <!-- /header -->
<?php wp_head(); ?>
  • sidebar.php
  1. index.phpの<div id="sidebar">〜<!-- /sidebar -->までを sidebar.php に Cut & Paste
  2. index.phpの該当箇所に <?php get_sidebar(); ?> を追記
  3. functions.php にregister_sidebar 関数を追記後、<div class="widget">〜</div> を <?php dynamic_sidebar(); ?> に置き換え
<div id="sidebar">
  <?php dynamic_sidebar(); ?>
</div> <!-- /sidebar -->
  • footer.php
  1. index.phpの<div id="footer">〜</html>までを footer.php に Cut & Paste
  2. index.phpの該当箇所に <?php get_footer(); ?> を追記
  3. Copyrightを追記
  4. <?php wp_footer(); ?> を追記
     <div id="footer" class="container">
       Copyright 2014<?php if (date("Y")!=2012) echo date("-Y"); ?> All right reserved, dev.example.com.
     </div> <!-- /footer(); -->
   <?php wp_footer(); ?>
   </body>
 </html>
  • functions.php
<?php

add_theme_support('menus');

register_sidebar(
    array(
        'name' => 'サイドバー1',
        'id' => 'sidebar-1',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    )
);

add_theme_support('post-thumbnails');
  • メニュー対応
  1. functions.php に add_theme_support 関数を追記
  2. ダッシュボードの 外観 >> メニュー を選択
  3. メニューを作成
  4. 固定ページを追加
  5. カスタムリンクを追加(URL: /wordpress ラベル: ホーム)
  6. メニューを保存
  7. header.php の <ul>〜</ul> を <?php wp_nav_menu(); ?> に置き換え
  • ウィジェット対応
  1. functions.php に register_sidebar 関数を追記しウィジェットに対応
  2. ダッシュボードの 外観 >> ウィジェット を選択
  3. 任意のウィジェットを追加
  4. 保存
  • 記事一覧の表示
  1. index.php の <div id="posts">〜<!-- /post --> にループ分を追加
  2. post のタイトルをテンプレートタグを利用した記法に変更
  3. 個別記事へのリンク先をパーマリンクに指定
  4. 日付とカテゴリーをテンプレートタグに変更
  5. body をテンプレートタグに変更
  • アイキャッチ画像の表示
  1. add_theme_support 関数を追記しダッシュボードからアイキャッチ画像を設定可能に
  2. index.php の <div class="post-image">〜</div> をテンプレートタグに変更
  • ナビゲーションを追加
  1. index.php の <div class="navigation">〜</div>をテンプレートタグに変更
  • index.php
<?php get_header(); ?>
    <div id="main" class="container">
      <div id="posts">

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

        <div class="post">
          <div class="post-header">
            <h2>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </h2>
            <div class="post-meta">
              <?php echo get_the_date(); ?>【<?php the_category(' , '); ?>】
            </div>
          </div>
          <div class="post-content">
            <div class="post-image">
              <?php if (has_post_thumbnail()) : ?>
              <?php the_post_thumbnail(array(100, 100)); ?>
              <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png" width="100" height="100">
              <?php else: ?>
            </div>
            <div class="post-body">
              <?php the_excerpt(); ?>
            </div>
          </div>
        </div> <!-- /post -->

    <?php endwhile; // end of the loop. ?>
    <?php else : ?>
        <p>記事はありません!</p>
    <?php endif; ?>

        <div class="navigation">
          <div class="prev"><?php previous_posts_link(); ?></div>
          <div class="next"><?php next_posts_link(); ?></div>
        </div>
      </div> <!-- /posts -->
      <?php get_sidebar(); ?>
    </div> <!-- /main -->
<?php get_footer(); ?>

2016/11/26 Parse error: syntax error, unexpected 'endwhile' (T_ENDWHILE) in /var/www/html/wordpress/wp-content/themes/example/mysite/index.php on line ** 発生(未解決)


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-11-26 (土) 22:36:52 (597d)