WordPressの勉強1（自分用）

参考：『基礎からのWordPress』高橋のり
※ローカルに設定

WordPressとは

・CMS（コンテンツマネジメントシステム・管理画面）
・GLP（再配布や改変を認めているライセンス）
・はじめからテーマを利用できる→PHP＋MySQL
・アップデートがあるのでメンテナンスが必要
・日本語で質問可能なフォーラムあり
・機能を加えるためのプラグインがある（配布・販売されている）
・プラグインにもアップデートあり
・テーマやプラグインの出処に気をつける

PHPとMySQL

PHPとは

・Hypertext Preprocessor
　※HTML:HyperText Markup Language
　動的にHTMLを作成するのが目的
・HTMLを書きなおさなくてもブログが書けるのはPHPがHTMLを作成するから
　（動的に作成されたページ）

MySQLとは

・文章（コンテンツ）を保管しておく場所→データベース（基地）の一つ
　一つのページを表示するために必要なデータは多い→整理して格納するのにデータベースが便利
　→データベース内でデータはExcelのように保存されている。phpMyAdminで可視化
・データベースを使いこなすには操作するためのプログラミング言語（SQL）が必要
　→WordPressでは直接命令を出すことはないが定期的なバックアップなどのメンテナンスが必要
・商用版とコミュニティ版の2種類

PHPはHTMLを生成するのが主な目的

・コピーライトの西暦を自動で取得し表示させる→更新が不要になる
　<small>Copyright <?php echo date("Y"); ?> ◯◯株式会社</small>
・
・HTMLタグと混在して書ける
・.phpで保存
・関数：ある決められた結果を求めるためのプログラム群に名前を付けたもの
　　　　引数（パラメータ）・戻り値
・開始タグ＋命令＋関数＋セミコロン＋終了タグ
・echo：それに続いて記述されたものを実際に出力

PHPはサーバーサイドスクリプト

・ユーザーのリクエスト→MySQLにデータを探しに行く→HTMLで表示
・検索エンジン、お問い合わせフォーム、ネットショッピング

開発環境の構築

Apache,PHP,MySQLをローカルに構築

・ローカルで構築作業を行えば修正のたびにアップロードする必要がなく効率的に進められる
・XAMPP：Apache（Webサーバー）とPHP、Perl、MySQLを利用できる環境を簡単に構築できるソフトウェア
・MAMP：Mac向け。Apache,PHP,MySQL

・WPのダウンロード
・直接ファイルを変更していいのは基本的にwp-contentのみ
・コアファイルはWPのシステムを担っているので変更しないこと
・MySQLにWordPress用のデータベースを作成
　→phpMyAdminを使ってデータベースを作成
・wp-config-phpに接続情報を書き込んで保存
・WPのインストール
⇛場所：Apache httpd.confで調べる
DocumentRoot:〜
⇛バーチャルホストを設定することもできる
　http://qiita.com/kon/items/d2dab7efd6738810b364
　バーチャルホスト追加設定＋hosts 項目を参照

WordPressの基本

ダッシュボード

・管理画面

管理バー

・タイトルの上にマウスを乗せるとサイトを表示メニューが出る

メディア

・アップロードする画像
・年月フォルダを自動的に作成
・大中小サイズ3個に複製する
・画像の編集が可能だが、すでに投稿した記事に挿入されている画像はコピーされたものなので、画像の挿入をやり直す必要がある

パーマリンク

・ブログの各記事ページを特定するURLのこと

プラグイン

・WP Multibyte Patch
・Akismet
・AddQuickTag

カテゴリーとタグ

・タグは1つの記事に複数設定が可能

固定ページ

・時系列に依存しないページ
・ナビゲーションにリンク表示

ショートコード

・画像のキャプション用コードなど

WordPressのテーマとテンプレートファイル

・テーマごとに独自の機能（ウィジェット、メニュー（ナビゲーション）、背景、ヘッダー）がある
・wp-contentフォルダ内のthemesフォルダの中に格納されている

テンプレートファイル

・ページを構成する部品化されたphp：テンプレートファイル
・index.phpでは、header.php sidebar.php footer.phpという別のテンプレートファイルを読み込んで1ページとして表示
　→冒頭部分でget_header関数、最後の部分でget_sidebar関数 get_footer関数
・index.php：メインとなるphpファイル。トップページなど
　single.php：個別ページ用のphpファイル。indexと差をつけるために使う。個別の記事ページ

テンプレート階層

・どのページでどのテンプレートファイルを使うかは、テンプレート階層で決められている
　ex）検索結果を表示するページ→search.phpを探す→なければindex.phpを使う
・トップページ、個別記事ページ、カテゴリーページ、タグページ、記事作成者ページ、日付別表示ページ、検索結果表示ページ、404 Not Foundページ など
・主なテンプレートファイル
　ページを表示するためのテンプレートファイル　index.php single.php
　部品化されたテンプレートファイル　header.php sidebar.php footer.php search-form.php comments.php
　その他　style.css functions.php（独自関数を書き込むためのファイル）
・get_header('sub')→header-sub.php ページによってガラッと変更したい場合など

functions.php

・WPはページを表示する時に、毎回自動的にfunctions.phpを読みにいく

起こったトラブル

プラグインの追加をするときにFTPが必要

・参照
http://qiita.com/mzdakr/items/41d64e5d79557b8de6ef
・直接プラグインをPCにダウンロードしフォルダに設置してもよい

プラグインの追加ができない、メディアのアップロードができない、パーマリンク設定を変えると404エラー

・サーバー側のユーザーがアクセス権限を持っていないから
・iTermでps aux | grep mysql
→サーバーのユーザー名確認
→sudo chown -R サーバーのユーザー名:自分のグループ ルートフォルダ名

WordPressサイト構築の基礎

テンプレートタグ

・WordPress内で定義されている関数
・HTMLを直接記述するのではなく、動的にHTMLを出力させてページを作成

header.php

body

テンプレートタグ
・home_url('path','scheme')：ホームURLを返す（相対パス・URLスキーム【どちらも省略可】）
　('/')としているのはurlの末尾にスラッシュを加えるため
・bloginfo('name,descriptionなど')：ブログに関する情報を出力
・get_search_form()：テーマ内のsearchform.php
・wp_nav_menu('theme_location = header-navi')：ナビゲーションメニューを出力
・body_class()：記述しておくとクラスをつけてくれるのでCSSで便利

⇛基本的にレイアウトのためのdivタグなどはHTMLでマークアップしていて、動的に書き換えたい部分だけテンプレートタグを?php ~?で記述する

head

・PHP基礎　if文
if (条件A) { 条件Aが満たされた場合に実行する処理; }elseif (条件B) { 条件Bが満たされた場合に実行する処理; }else { 条件AもBも満たさない場合に実行する処理; }
if (条件A): 条件Aが満たされた場合に実行する処理; else if (条件B): 条件Bが満たされた場合に実行する処理; else: 条件AもBも満たさない場合に実行する処理; endif;
※elseif以降は省略可
⇛header.phpは基本的にブログの全てのページで使われて、毎回ヘッダーを出力するが、ページによって内容の変更が必要。
⇛title要素 is_singleならばwp_titleを実行
`

` ⇛トップページでは「ブログのタイトル」、個別記事ページでは「記事のタイトル::ブログのタイトル」となる

条件分岐タグ
・is_home：ブログのメインページが表示されていたら
・is_front_page：ブログ・固定ページ関わらずサイトのフロントページ（トップページ）
・is_page：固定ページ
・is_category：カテゴリーページ
・is_tag：タグページ
・is_search：検索結果ページ
・is_page('about')：aboutというスラッグの固定ページ
・is_single('fluit-talt')：fruit-tartというスラッグの個別記事ページ
・is_category('8')：カテゴリーID8番のカテゴリーページ
・!is_home：ブログのメインページが表示されていなかったら
・!is_page：固定ページが表示されていなかったら

テンプレートタグ
・wp_title('sep','echo','seplocation')：ページタイトルの取得、表示（区切り文字・表示するかどうかtrue/false・区切り文字を表示する位置左'',右'right'）
・get_template_directory_uri()：テーマフォルダまでのパスの取得
・get_stylesheet_uri() ：style.cssまでのパスの取得
　⇛ルートディレクトリはテーマディレクトリの上
・wp_head(), wp_footer()：記述がないとプラグインが動かない

メインテンプレートとWordPressループ

index.php

・get_header(), get_sidebar(), get_footer()

・PHP基礎　while文
基本構文
while (条件) { 繰り返す処理 }
while (条件) : 繰り返す処理 endwhile;
何回繰り返すかは条件による

WordPressループという考え方

`

　　

記事はありません

　　

お探しの記事は見つかりませんでした

` ※while文は省略 ・if (have_posts()) : ?で表示する記事があるかどうかをチェック 　（have_postsは条件分岐タグのようなもの） ・表示する記事がなかった場合にテキスト表示

while文による繰り返し

<?php while (have_posts()) : the_post(); 　　記事のIDを表示する 　　記事のタイトルを表示する 　　記事の日付を表示する 　　記事のカテゴリーを表示する 　　記事へのコメント数を表示する 　　記事の本文を表示する endwhile; ?>
・while (have_post())：表示する記事がある間、各記事の内容をパーツごとに出力する処理を繰り返す
・the_post()：処理対象の記事を1つ先に進める
　while文では、条件と比較する値が変わらないと永遠にループ、同じ記事を何度も出力してしまうので、the_post()により処理対象を変更している

WordPressループの基本構造

<?php if (have_posts()) : 　　while (have_posts()) : the_post(); 　　　ここが実際に繰り返して表示されるコード 　　endwhile; …繰り返し終了 else : 　　　表示する記事がない場合のコード endif ; ?>
なぜこのWordPressループが重要なのか
⇛それぞれのテンプレートタグは「使っていい場所」「使ってはいけない場所」がある
　…「ループ内で使えるテンプレートタグ」「ループ外で使えるテンプレートタグ」「場所を問わず使えるテンプレートタグ」
Ex)　the_title：ループ内で記事のタイトルを表示する
　　single_post_title：ループ外で記事のタイトルを表示する
⇛WordPressでのコーディングでは、常にこの「WordPressループ」を意識しなくてはならない

WordPressループ内のコード

`

> 　　

　　　

　　

　　　 　　　Category - 　　　 　　　 　　　 　　

　

` ・the_ID()：記事のIDを表示する【ループ内】※IDは編集画面のアドレスバーでも確認できる 　特定の記事だけにCSSでスタイルを変更したい場合など ・post_class()：各記事にいろいろなクラスを自動でつける⇛CSSでの装飾に便利【ループ問わず】 ・the_permalink()：記事のパーマリンクを表示【ループ内】 ・the_title('before','after',echo)：記事のタイトルを表示/取得【ループ内】 　before→タイトルの前に出力する文字列 after→後ろ…文字列 echo→表示する(true）しない(false）を指定 　※パラメータを指定しないと記事のタイトルをそのまま表示する 　※beforeやafterには通常の文字列のほか、HTMLタグを指定することもできる 　`','',true); ?>` 　⇛タイトルの前後にh2タグが入った状態で表示 ・the_date('format','before','after',echo)：記事の投稿日時を表示【ループ内】 　format→日付の表示形式 before→日付の前に出力する文字列 after→日付の後ろに出力する文字列 echo→表示する(true)、しない(false)を指定 　※同じ日に複数の記事がある場合は、最初の記事にだけ表示される⇛リスト表示に良い 　※パラメータを指定しない場合、WordPressの表示設定画面で設定した表示形式 　※formatパラメータの指定はPHPのdate関数 　　('Y-n-j')→2012-3-26　('n/j - Y')→3/26 2012　など

全ての記事で日付を表示したい場合
<span class="post-date"><?php echo get_the_date(); ?></span>
・get_the_date('format')：記事の投稿日を取得　【ループ内】
　※取得するだけで表示はされないので、echoを使って表示するようにする
・the_category('separator','parents',post_id)：記事が投稿されているカテゴリーを表示　【ループ内】
　separator→複数のカテゴリーを並べる場合の区切り文字
　parents→親子関係のあるカテゴリーをどう表示するか、single,multipleで指定
　post_id→カテゴリーを表示する記事のID。デフォルトでは「現在の記事」を表示するようになっている。
・comments_popup_link('zero','one','more','CSSclass','non')：もらったコメントの数をコメント欄へのリンクとともに表示【ループ内、コメントループ内】
　→zero（コメント0の時の表示書式） one（コメントが1時の時の表示形式） more（コメントが2件以上の時の表示形式） CSSclass（リンクを表示する場合に使用するCSSのクラス名） none（コメントを受け付けない場合の表示形式）
　※head要素内に
<?php comments_popup_script(); ?>
　があるかないかで挙動が違う
　⇛ない＝コメント欄が小さい別ウィンドウでポップアップされて表示される
　※％…最終的にコメント数に置き換えられる
　※コメントを受け付けない→5番めの引数 'Comment Off'
・the_content('more_link_text', display)：投稿の本文を表示する　【ループ内】
　※!-- more --タグがある場合は、続きを読む以前を表示（single.phpを除く）
　→more_link_text（!--more--タグで表示されるリンク文字列、display個別記事ページで!--more--タグより前の文字を表示する(false)かしないか(true）。デフォルトはfalse。
<?php the_content(続きを読む »'); ?> `
　※ピリオドは文字列を連結するための演算子と呼ばれるもので、「記事のタイトル」と「の続きを読む »」が連結されて表示される

ページャーの表示

・previous_posts_link('Label', Max number of pages)　※新しいページへのリンク
・next_posts_link('Label', Max number of pages)　※古いページへのリンク
　：1ページに表示する件数以上の投稿があるときに、次ページ（前ページ）へのリンクを表示する　【ループ外】
　Label(次ページへのリンク文字列) Max number of pages(進む最大ページ数。デフォルトは無制限)
<?php next_posts_link('&laquo; PREV', 5); ?>
　※5ページ目以降になるとページャーが表示されない

個別記事テンプレートとコメント欄

個別記事テンプレート

・the_content()：single.phpでは全文を表示するので、パラメータなしで記述

・PHP基礎　変数
変数とは値に名前をつけて扱うためのしくみ
変数のメリットは、中の値が変わっても同じ変数名でアクセスできるというところ
=は値を入れるという意味
"", ''に入る値は一つ
PHPの変数の決まり：頭に$マーク、半角英数字と_のみ、はじめの文字に数字は×
Ex)ブログの名前を変数にし、ヘッダーとフッターに表示
`$title = "◯◯日記";

` `

Copyright All Rights Reserved.

`

・PHP基礎　配列
変数に入れられる値は一つ→多数の変数が必要になり管理が煩雑になる
配列は同じようなデータを複数格納することができるバインダーのようなもの
$配列名[インデックス] = 値
インデックスとは配列に含まれる複数の値を識別するためのラベルのようなもの
$blog[title] = "◯◯日記"; $blog[user] = "たかはし"; $blog[url] = "http://example.com";
$blog = array ( 　　　　　'title' => '◯◯日記', 　　　　　'user' => 'たかはし', 　　　　　'url' => 'http://example.com' );
arrayは配列を作成するための関数
「インデックス => 値」の形式で間を「,」で区切りながら並べると、複数の要素を持つ配列を一度に作ることができる
配列から値を取り出す場合
echo $blog[user];

記事を分割した場合にページャーを表示する

・投稿画面（テキスト）にて<!--nextpage-->
・wp_link_pages(args)：上記タグを挿入した部分にページャーを表示させる　【ループ内】
　args：オプションを格納した配列名、もしくはオプション名=値の形式で指定

argsで指定可能なオプション
before：ページャーの前に挿入する文字。デフォルトは「<P>Pages:」
after：ページャーの後のテキストデフォルトは「</p>」
link_before：各ページへのリンク前のテキスト。デフォルトは空
link_after：各ページへのリンク後のテキスト。デフォルトは空
next_or_number：ページャーを番号で表示/任意の文字で表示するかを指定。デフォルトはnumber/任意の文字next
nextpagelink：next_or_numberでnextを指定した場合の次ページへの文字列。デフォルトでは「次ページ」
previouspagelink：next_or_numberでnextを指定した場合の前ページへの文字列。デフォルトでは「前のページ」
pagelink：next_or_numberでnumberを指定した場合のページ番号のフォーマット。文字列内の%が番号に置き換えられる。例えば「ページ%」→「ページ1」。デフォルトは番号のみ「%」
ID：ユーザーID

例
$args = array( 'before' => '<div class="page-link">', 'after' => '</div> 'link_before' => '<span>', 'link_after' => '</span>', ); wp_link_pages($args); ?>

※pでなくdivやspanでマークアップすることもできる
※デフォルトのままで良い場合は引数なし

投稿タグを表示する

・the_tags('before', 'separator', 'after')：記事に付けられたタグを表示　【ループ内】
　before:タグの前に出力する文字列　separator:複数のタグを表示する場合の区切り文字　after:タグの後に出力する文字列
例1
<?php the_tags('Tag : ',', '); ?>
例2
<?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?>
→こういうふうにも書けるのでタグの後に出力する文字列も有効
・the_author()
・get_author_posts_url(user_id, 'nicename' )
・get_the_author_meta('field', user_id)
　field: user_email, user_url, display_name, nickname, description,ID
例
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author(); ?></a>

次の記事、前の記事へのリンクを表示する

・previous_post_link('format', 'link', same_cat, 'excluded_cat')：次の記事へのリンク　【ループ内】
・next_post_link(同上)：前の記事へのリンク　【ループ内】
　format:リンク文字列の表示書式　link:リンク文字列。デフォルトは記事のタイトル　same_cat:表示する記事を同じカテゴリーに限定する(true)か、しないか(false)を設定　excluded_cat:表示させたくない記事のカテゴリーIDの番号。複数指定する場合はandで区切る
例1　formatパラメータ
previous_post_link('<strong>Go to %link</strong>');
%link＝記事のタイトル、リンクがはられるのはタイトル部分のみ
例2　linkパラメータ
previous_post_link('%link','Go to %title');
linkパラメータがあると文字列全てにリンクがはられる
例3　もし記事があったら…の条件分岐・divタグ　→　p.144

コメント一覧を表示する

<?php comments_template(); ?>
→comments.php
・コメントループ
if (have_comments()):〜
・コメントを表示する部分には#commentsというIDをHTMLの要素（divなど）につける
→p127のcomments_popup_linkのリンク先はコメントがあった場合には#commentsというハッシュのついたリンクになる
・wp_list_comments(options)：記事のコメント表示
　options:オプションを格納した配列名、もしくはオプション名=値の形式で指定
　コメントをリストタグで出力するテンプレートタグ（olやulで囲んでおく）
　返信の入れ子やコメント数が多い時の設定は設定→ディスカッション
・comment_from(options)：コメントが許可されている場合、コメントフォームを表示する
　options:配列名もしくはオプション名=値の形式で指定
・comment.phpはなくてもコメント欄は表示される

Webサイトのサイドバーとフッター

get_sidebar, get_footer

サイドバーのウィジェット

・外観→ウィジェット
・ヘッダーにもサイドバーにも検索フォームをつくると、id="s"が同一となる（どちらもsearchform.phpを利用するため）

sidebar.php

・is_active_sidebar(index)：ダイナミックサイドバーが有効かどうかをチェック
・dynamic_sidebar(index)：ダイナミックサイドバーを表示
　→index:サイドバーのID名もしくはID番号
　　サイドバーのID名はfunctions.phpで定義（後述）
　ダイナミックサイドバーは複数作成が可能（フッターなど）

functions.phpでダイナミックサイドバーを定義

・テーマで使用する関数などを記述しておける便利なファイル（なくても可）
・register_sidebar：ダイナミックサイドバーを定義する関数（パラメータが多いため配列で指定）

name:管理画面に表示されるダイナミックサイドバーの名前
description:管理画面に表示されるダイナミックバーの説明
id:ダイナミックサイドバーを区別するためのid名
before_widget/after_widget:ウィジェットの前後に挿入するHTML要素
before_title/after_title:タイトルの前後に挿入するHTML要素

ウィジェットがない場合の表示 sidebar.php

カテゴリー
・wp_list_categories(args)：カテゴリーをリンクで表示

指定できるパラメータ（配列）
style:listならliタグ→ulタグで囲む必要あり、noneまたは空でaとbrタグ（デフォルトはlist）
show_count:投稿数を表示true、表示しない場合false（デフォルトはfalse）
use_desc_for_title:aタグのtitle属性にカテゴリーの説明を指定するtrue、カテゴリー名false（デフォルトtrue）
title_li:見出しを指定（省略時はカテゴリー）
depth:カテゴリー階層の表示レベルを指定（0:全ての小カテゴリーを表示（デフォルト）、-1:全てのカテゴリーをフラットなリストで表示、1:最上位カテゴリーのみ表示、n:n（数値）階層目までを表示（3ならば孫まで））
exclude:表示したくないカテゴリーをIDで指定

新着記事や月別アーカイブ
・wp_get_archives(args)：日付ベースのアーカイブをリンクで表示

指定できるパラメータ（配列）
type:yearly, monthly, daily, weekly, postbypost(最近)（デフォルトはmonthly）
limit:表示する件数（デフォルトは無制限）
format:出力するHTML要素を以下の値で指定する（デフォルトはhtml）
　html:liのリスト形式で表示→ulタグで囲む必要あり　option:optionタグで表示 link:link rel="archives"...の形式で表示(head内で使用) custom:任意のHTMLタグで表示
before:前に表示する文字列（デフォルトでは設定なし）
after:後に表示する文字列（デフォルトでは設定なし）
show_post_count:対象となる記事数を表示する1,しない0（デフォルト）

footer.php

・blog_infoテンプレートタグでサイト名をコピーライト部分に表示
・wp_footer：wp_headと同じような役割の関数、これがないとプラグインが機能しない場合がある

ここまでが基本。テンプレートタグの知識を増やし理解を深めるためには、WordPress CODEXやフォーラムを活用していくこと

固定ページとナビゲーション

固定ページを表示するpage.php

・自己紹介ページなどのように常に固定してサイト内に設置したいコンテンツに向いている
・管理バーから「固定ページを編集」
・デフォルトではindex.phpテンプレートファイルが使われる（single.phpではない）
　→固定ページに適した表示をするためpage.phpというテンプレートファイルが用意されている
・テンプレート階層によってindex.phpよりも優先される
・一般的なWebサイトをWordPressで作成するには、必ず利用する
・固定ページにもコメント欄を設置してコメントを受け付けることができる

ナビゲーションに固定ページを表示する（カスタムメニュー）

・固定ページはナビゲーションにリンクを表示することがほとんど
・外観→メニューで設定　カスタムリンク・順番の入れ替え・プルダウンメニューなどもできる

カスタムメニューとテーマサポート

・カスタムメニューやウィジェットはテーマ側がこれに対応していないと利用できない
　→テーマでカスタムメニューを利用できるようにするコードをfunctions.phpとheader.phpなどに
・add_theme_support('feature')：functions.phpに記述することで、テーマがパラメータで指定した機能をサポートするようになる

custom-header
custom-background
post-thumbnails:アイキャッチ画像
menus：カスタムメニュー
automatic-feed-links：フィードリンク

・実際に表示するテンプレートファイル側（header.phpなど）には、以下のように記述すればその部分にdiv要素でラッピングされたリストでメニューが表示される
<?php wp_nav_menu(); ?>

複数のメニューを使う場合

・register_nav_menu('location', 'description')：functions.phpに記述することで、カスタムメニューの場所を定義する
→location:メニューID　description:説明　※任意に決めて構わない
→管理画面でテーマの場所を選べるようになる
functions.phpで機能を定義し、各テンプレートファイルで表示させるという流れ

テーマのカスタマイズと子テーマ

テーマカスタマイズの実際と子テーマ

・WordPressにはアップデートがあり、テーマにもアップデートを行うものが数多く存在する
→テーマをアップデートした場合、テーマファイルは更新され、施したカスタマイズが失われる
→子テーマ：既存のテーマを親として、変更したいテンプレートファイルだけで構成されるテーマのこと
・WordPressでは子テーマが存在する場合その内部のテンプレートファイルが優先して使用される

子テーマの作り方

・最低限必要なのはstyle.css
・親テーマからコピーしたものを子テーマフォルダ内に用意してカスタマイズのベースに（ファイル名は必ず同じにする）

親テーマにないファイルの追加

・テンプレート階層の上位であれば優先される

追記して使う子テーマのfunctions.php

・functions.phpは上書きされない
・元のものに追記形式になる

画面が真っ白になってしまった場合のトラブルシューティング

・functions.phpファイルを編集していて画面が真っ白に
→php.iniの中にdisplay_errors = Onの記述があればエラー箇所の表示ができる