#contents ** 概要 [#yed56b12] - ブログシステム - 公式サイト: https://wordpress.org/ - 公式サイト(日本語): https://ja.wordpress.org/ ** 環境 [#l66ae946] - 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 ** 範囲 [#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 ** 発生(未解決)