WordPress入門のバックアップの現在との差分(No.1)

バックアップ一覧
差分を表示
ソースを表示
バックアップを表示
WordPress入門へ行く。
- 1 (2016-11-26 (土) 17:32:13)
- 2 (2016-11-26 (土) 17:32:44)
追加された行はこの色です。
削除された行はこの色です。
#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の行頭&#12316;<!-- /header -->までを header.phpに Cut & Paste
+ index.phpの該当箇所に <?php get_header(); ?> を追記
+  style.css 読み込み部分をテンプレートタグを利用した記法に変更
+ <title></title> 内をテンプレートタグを利用した記法に変更
+ <h1></h1> 内をテンプレートタグを利用した記法に変更しリンク先をホームに指定
+ functions.php に add_theme_support 関数を追加後、<ul>&#12316;</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">&#12316;<!-- /sidebar -->までを sidebar.php に Cut & Paste
+ index.phpの該当箇所に <?php get_sidebar(); ?> を追記
+ functions.php にregister_sidebar 関数を追記後、<div class="widget">&#12316;</div> を <?php dynamic_sidebar(); ?> に置き換え

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

- footer.php

+ index.phpの<div id="footer">&#12316;</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>&#12316;</ul> を <?php wp_nav_menu(); ?> に置き換え

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

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

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

-- ナビゲーションを追加
+ index.php の <div class="navigation">&#12316;</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 ** 発生（未解決）
WordPress入門 のバックアップの現在との差分(No.1)

WordPress入門のバックアップの現在との差分(No.1)
