- 追加された行はこの色です。
- 削除された行はこの色です。
#contents
** 概要 [#yed56b12]
- ブログシステム
- 公式サイト: https://wordpress.org/
- 公式サイト(日本語): https://ja.wordpress.org/
** 事前知識 [#q970b3f0]
- HTML/CSS
- PHP/MySQL
** 環境 [#l66ae946]
- OS X 10.11 El Capitan
- Cyberduck 5.2.2
- 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
** 範囲 [#o85503b0]
- Setup
- 管理画面の使い方
- 基本的な使い方
- シンプルなテーマの作り方
** ローカルのHostsファイル設定 [#n3dc542d]
$ 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モジュール有効化 [#rbb4d662]
- 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をインストールしよう [#wd48861e]
- 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
** ダッシュボードを使ってみよう [#af83ecaf]
- 記事(Posts):記事、カテゴリー、タグの追加
- メディア(Media):ファイルのアップロード
- 固定ページ(Pages):時系列ではなく常に表示させたいページの作成
- コメント(Comments)
- 外観(Appearance)
-- テーマ(Themes):テーマの検索、追加、切り替えが可能
-- ウィジェット(Widgets):テーマのサイドバーに表示させる様々なパーツの管理
-- テーマ編集(Editor):テーマをHTML/CSS/PHP等で編集可能
-- メニュー(Menus):テーマによって変わる
-- ヘッダー(Header):テーマによって変わる
-- 背景(Background):テーマによって変わる
- プラグイン(Plugins):便利な拡張機能を追加(追加/削除、有効化/無効化)可能
- ユーザー(Users):記事の投稿者などユーザーを追加可能
- ツール(Tools):プラグインによって変わる
** WordPressの設定をしてみよう [#q7f2eaec]
- 設定(Settings)
-- 一般(General):インストール時に指定した設定内容、日付や時間のフォーマットなど
-- 投稿設定(Writing):
-- 表示設定(Reading):1ページ何件表示するかなど
-- ディスカッション(Discussion):コメントどうするかどうか(承認するかどうかなど)
-- メディア(Media):アップロードする画像のサイズどうするか設定など
-- パーマリンク(Permalinks):記事のURLをどうするか
- パーマリンクの設定変更(スラッグ(slug)=記事を表す短い文字列 を指定)
+ デフォルト(Plain)→日付と投稿名(Day and name)に変更
+ 変更を保存(Save Changes)&color(red){※}; 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
** 記事を投稿してみよう [#fa56d410]
+ 投稿記事(All Posts) >> 新規追加(Add New)
+ メニューを閉じる(Collasp menu)
+ 表示オプション(Screen Options) >> スラッグ(Slug) にチェック
+ 記事を作成
+ カテゴリを選択
+ スラッグを入力
+ 公開 &color(red){※}; エディタは2種類:ビジュアル(Visual)とテキスト(Text)
&color(red){※}; スラッグを含むURLで記事にアクセスして404 Not Foundエラーとなる場合は .htaccess の内容に不備があるか mod_rewrite が有効化されていない可能性あり
** 固定ページを作ってみよう [#aa79aff7]
+ 固定ページ >> 新規追加
+ 表示オプション(Screen Options) >> スラッグ(Slug) にチェック
+ 記事を作成
+ スラッグを入力
+ 公開
** ゼロからテーマを作ってみよう [#c65e473e]
+ 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 作成 [#y4b48f60]
- 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>
&color(red){※}; 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テーマに変換しよう [#ld7a2f47]
1. index.html -> index.php にファイル名変換~
2. style.css にヘッダ情報追加 &color(red){※}; 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ダッシュボードのテーマ一覧に表示される &color(red){※}; この時点ではテーマを有効化してもCSSが適用されていない~
5. 空の header.php / footer.php / sidebar.php / functions.php を作成
** ファイルを分割していこう [#t0c33013]
- header.php
+ index.phpの行頭〜<!-- /header -->までを 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 -->までを 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 --> にループ分を追加
+ 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(); ?>
&color(red){※}; 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 ** 発生(未解決)