WordPress入門

概要
環境
範囲
ローカルのHostsファイル設定
Apacheのmod_rewriteモジュール有効化
WordPressをインストールしよう
ダッシュボードを使ってみよう
WordPressの設定をしてみよう
記事を投稿してみよう
固定ページを作ってみよう
ゼロからテーマを作ってみよう
index.html / style.css 作成
WordPressテーマに変換しよう
ファイルを分割していこう

概要 †

ブログシステム
公式サイト: https://wordpress.org/
公式サイト(日本語): https://ja.wordpress.org/

↑

環境 †

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 配下に展開

公式サイト（日本語版）より最新版の wordpress-4.6.1-ja.zip をローカルにダウンロード＆解凍
解凍した wordpress フォルダを仮想マシンのホームディレクトリ（/home/vagrant）に複製
wordpressフォルダをDocumentRoot配下（/var/www/html）に移動
wordpressディレクトリの所有者をapacheに変更

WordPressインストール（DB接続設定）

ブラウザから http://dev.example.com/wordpress/ へアクセス
画面に沿って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）＝記事を表す短い文字列を指定）

デフォルト（Plain）→日付と投稿名（Day and name）に変更
変更を保存（Save Changes）※ wordpress ディレクトリ配下に .htaccess ファイルが自動的に生成

画像をアップロードできるようにする

wp-content 配下に uploads というディレクトリを作成
パーミッションを 777 に変更

$ sudo mkdir uploads
$ sudo chown -R apache:apache uploads
$ sudo chmod 777 uploads

カテゴリーの追加

カテゴリ名：Diaries / スラッグ（slug）名：diary
カテゴリ名：Meals / スラッグ（slug）名：meal

↑

記事を投稿してみよう †

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

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

↑

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

固定ページ >> 新規追加
表示オプション（Screen Options） >> スラッグ（Slug）にチェック
記事を作成
スラッグを入力
公開

↑

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

index.html / CSS を作成
WPのテーマに変換
index.phpを完成させる
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

index.phpの行頭〜までを header.phpに Cut & Paste
index.phpの該当箇所に <?php get_header(); ?> を追記
style.css 読み込み部分をテンプレートタグを利用した記法に変更
<title></title> 内をテンプレートタグを利用した記法に変更
<h1></h1> 内をテンプレートタグを利用した記法に変更しリンク先をホームに指定
functions.php に add_theme_support 関数を追加後、<ul>〜</ul> を <?php wp_nav_menu(); ?> に置き換え
行末に <?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

index.phpの<div id="sidebar">〜までを sidebar.php に Cut & Paste
index.phpの該当箇所に <?php get_sidebar(); ?> を追記
functions.php にregister_sidebar 関数を追記後、<div class="widget">〜</div> を <?php dynamic_sidebar(); ?> に置き換え

<div id="sidebar">
  <?php dynamic_sidebar(); ?>
</div> <!-- /sidebar -->

footer.php

index.phpの<div id="footer">〜</html>までを footer.php に Cut & Paste
index.phpの該当箇所に <?php get_footer(); ?> を追記
Copyrightを追記
<?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');

メニュー対応

functions.php に add_theme_support 関数を追記
ダッシュボードの外観 >> メニューを選択
メニューを作成
固定ページを追加
カスタムリンクを追加（URL: /wordpress ラベル: ホーム）
メニューを保存
header.php の <ul>〜</ul> を <?php wp_nav_menu(); ?> に置き換え

ウィジェット対応

functions.php に register_sidebar 関数を追記しウィジェットに対応
ダッシュボードの外観 >> ウィジェットを選択
任意のウィジェットを追加
保存

記事一覧の表示

index.php の <div id="posts">〜 にループ分を追加
post のタイトルをテンプレートタグを利用した記法に変更
個別記事へのリンク先をパーマリンクに指定
日付とカテゴリーをテンプレートタグに変更
body をテンプレートタグに変更

アイキャッチ画像の表示

add_theme_support 関数を追記しダッシュボードからアイキャッチ画像を設定可能に
index.php の <div class="post-image">〜</div> をテンプレートタグに変更

ナビゲーションを追加

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 ** 発生（未解決）

最新の20件