WordPress 出力処理の仕組み

メインクエリ

single.php、category.php等のプラグインページにアクセスした際に、
自動的にデータベースから必要なデータを抽出する処理。
データは
$wp_query
$post
$pages
等へ格納され、
テンプレートタグ等を利用する事で更に必要な項目(タイトル等)を出力できる。

$wp_query

WordPressで自動的に定義されるグローバル変数
single.php、category.php等のプラグインページにアクセスすると自動的にこの変数に記事情報が格納される。
固定ページなら1記事、投稿ページなら複数記事

$post

WordPressで自動的に定義されるグローバル変数
単一の記事データが格納される。

$pages

WordPressで自動的に定義されるグローバル変数
単一の固定ページデータが格納される。

フロー(概要)

プラグインページにアクセス
記事データを取得($wp_queryへ格納)

the_post()等のテンプレートタグを実行
特定記事を取得($post、$pagesへ格納)

the_title()等のテンプレートタグを実行
記事データを出力

フロー(コード)

$wp_query内記事データ全件Loop
<?php while( have_posts() ): ?>
 

 $wp_queryから記事データを取得($post、$pagesへ格納)
 <?php the_post(); ?>
 

 記事毎のCSSクラス出力(必須)
 <?php the_post_class(); ?>
 

 タイトル
 <?php the_title(); ?>
 

 URL
 <?php the_permalink(); ?>
 

 投稿日
 <?php the_get_the_date(); ?>
 

 記事本文
 <?php the_content(); ?>
 
<?php endwhile; ?>

別ページデータの出力(サブクエリ)

メインクエリが自動的に実行された後、意図的に別ページのデータを出力したい場合に使用
なお、サブクエリ実行時、メインクエリの実行結果(グローバル変数の中身)は自動的に退避されるので、以下の関数によって復元が可能。
・wp_reset_query()
$wp_queryと$postを復元
・wp_reset_postdata()
$postを復元

query_posts

よく使われいた処理方法
上記グローバル変数($wp_query等)を上書きしてしまう為、現在では使用が推奨されていない。
<?php

 query_posts(
  array(
   'post_type' => 'post',
   'posts_per_page' => '5'
  )
 );
?>

<?php

 while( have_posts() ):
  the_post();
  ~
 endwhile;
 
 グローバル変数の中身を、サブクエリ実行時の状態時から退避しておいた実行前へ戻す
 wp_reset_query();
?>

get_posts

上記グローバル変数($wp_query等)を上書きしない。
<?php

 $myPosts = get_posts(
  array(
   'post_type' => 'post',
   'posts_per_page' => '5'
  )
 );
?>

<?php

 foreach( $myPosts as $post ):
  setup_postdata( $post );
  ~
 endforeach;
 
 グローバル変数の中身を、サブクエリ実行時の状態時から退避しておいた実行前へ戻す
 wp_reset_query();
?>

WP_Query

メインクエリ、上記クエリ(get_posts、get_posts)の内部で使用される関数
<?php

 $myQuery = new WP_Query(
  array(
   'post_type' => 'post',
   'posts_per_page' => '5'
  )
 );
?>

<?php

 while( myQuery->have_posts() ):
  myQuery->the_post();
  ~
 endwhile;
 
 グローバル変数の中身を、サブクエリ実行時の状態時から退避しておいた実行前へ戻す
 wp_reset_query();
?>

WordPress 重要用語

テンプレートファイル

テンプレート階層において表示時に使用されるPHPファイル
category.php、single.php等

テンプレートタグ

データの取得・出力関数
テンプレートファイル中に記述

プラグイン

プログラムまたは1つ以上の関数

フック

・アクションフック
・フィルターフック
アクション発生条件
・データベースのデータ変更
・管理画面、サイト表示の変更
フィルター通過条件
・DB登録
・DB読み込み

アクションフック

アクション発生時に実行されるプラグイン

フィルターフック

フィルター通過時に実行されるプラグイン
フィルターフック(the_content)通過時にプラグイン(wpautop)を実行する
<?php add_filter ('the_content', 'wpautop'); ?>
※wpautopというphp関数が定義されていなければならない
フィルターフック(the_content)通過時のプラグイン(wpautop)を実行を削除
<?php remove_filter ('the_content', 'wpautop'); ?>
※functions.php
function (関数名)($class) {
 global $post, $posts;
 if ( is_home() && !is_paged() && ($post == $posts[0]) ) $class[] = 'firstpost';
 return $class;
}
add_filter('post_class', '(関数名)');

WordPress 検索ページ

※search.php
<?php
 検索スラッグ取得
 $s = $_GET['s'];
 
 条件文へ埋め込み
 $setting="s=${s}&posts_per_page=100";
 
 設定
 query_posts( $setting );
?>

<h2><?php the_search_query(); ?>の検索結果 : <?php echo $wp_query->found_posts; ?>件</h2>
<!-- 投稿情報 loop -->
<?php if(have_posts()) : ?>
 <?php while(have_posts()):the_post() ?>
  <h3><?php the_title(); ?></h3>
  <div class="post">
   <?php if (has_post_thumbnail()) : ?>
    <p class="postThumbnail"><?php the_post_thumbnail(); ?></p>
   <?php endif; ?>
   <p><?php the_content('詳細はこちら'); ?></p>
  </div><!– /post –>
 <?php endwhile; ?>
<?php else: ?>
 <div class="post">
  <p>該当記事無し</p>
 </div>
<?php endif; ?>

WordPress カテゴリー、タグページ

カテゴリーページ

カテゴリー情報設定・出力

※category.php
<h1><?php echo single_cat_title(); //カテゴリー名 ?></h1>
<p><?php echo category_description(); //カテゴリー説明文 ?></p>

カテゴリー、件数設定
<?php
 選択カテゴリー取得
 $cat_info = get_category( $cat );
 $mySlug=esc_html( $cat_info->slug );
 
 条件文へ埋め込み
 $setting="category_name=${mySlug}&posts_per_page=100";
 
 設定
 query_posts( $setting );
?>

記事出力

※出力結果(ブラウザ)
category3

記事ページ

※single.php
<div class="postinfo">
<?php if( has_category() ): ?>
 <span>
  カテゴリーアイコン表示
  <i class="icon-folder-open"></i>
  カテゴリー表示
  <?php the_category( ', '); ?>
 </span>
<?php endif; ?>
記事出力
</div>

※出力結果(html)
<div class="postinfo">
<!--カテゴリー-->
<span>
 <i class="icon-folder-open"></i>
 カテゴリーページへのパラメータ(カテゴリー)付きリンクが自動設定される
 <a href="http://~/category/categorya/" rel="category tag">カテゴリーA</a>,
 <a href="http://~/category/categorya/categorye/" rel="category tag">カテゴリーE</a>
</span>
記事
</div>

装飾

※header.php
<!--アイコンフォント読み込み-->
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

※style.css
/* カテゴリー */
.postinfo i { color: #bdbc8f; }
.postinfo a
{
 color: #666666;
 text-decoration: none;
}

※出力結果
category2

タグページ

タグ情報設定・出力

※tag.php
<h1><?php echo single_tag_title(); //タグ名 ?></h1>
<p><?php echo tag_description(); //タグ説明文 ?></p>

タグ、件数設定
<?php
 検索スラッグ取得
 $mySlug = single_tag_title("", false);
 
 条件文へ埋め込み
 $setting="tag=${mySlug}&posts_per_page=100";
 
 設定
 query_posts( $setting );
?>

記事出力

WordPress カスタムメニュー

設定・出力

方法①:管理画面にメニューを実装

※functions.php
add_theme_support( 'menus' );
管理画面にメニューが表示されるので手動で設定(設定方法略)

方法②:ロケーションを作成する

メニュー設定
※functions.php
register_nav_menu( 'navigation', 'ナビゲーション' );

custom_menu1
画面下部に第二引数の説明文が表示されるのでチェックを入れて保存

メニュー出力
※header.php
<?php
 wp_nav_menu(
  array(
   ロケーションを指定
   'theme_location'=>'navigation',
   
   <div>タグでなく、<nav>タグで出力する
   'container'=>'nav'
  )
 );
?>

※出力結果(html)
<nav class="menu-top-container">
 <ul id="menu-top" class="menu">
  <li id="menu-item-~" class="~"><a href="http://~">TOP</a></li>
  <li id="menu-item-~" class="~"><a href="http://~">ブログ</a></li>
  <li id="menu-item-~" class="~"><a href="http://~">はじめての方へ</a></li>
  <li id="menu-item-~" class="~"><a href="http://~">リンク</a></li>
  <li id="menu-item-~" class="~"><a href="http://~">お問い合わせ</a></li>
 </ul>
</nav>

※出力結果(ブラウザ)
custom_menu3

装飾

custom_menu2

※style.css
nav ul {
 list-style-type: none;
 margin-top: 0;
 margin-bottom: 0;
 margin-left: 0;
 font-size: 0;
}
nav li {
 display: inline;
 font-size: 12px;
 border-right: solid 1px #aaaaaa;
 padding-left: 10px;
 padding-right: 10px;
}
nav li:first-child {
 border-left: solid 1px #aaaaaa;
}
nav {
 margin-left: auto;
 margin-right: auto;
 text-align: right;
 margin-bottom: 10px;
}
nav a {
 color: #000000;
 text-decoration: none;
}
nav ul li a:hover {
 color:#999;
 text-decoration:none;
}
.current-menu-item a {
 font-weight: bold;
}

WordPress テーマ作成方法

テーマ

テーマディレクトリ

新規ディレクトリをテーマディレクトリに作成する
例: ~/wp-content/themes/test

必須ファイル

index.php 中身は空でOK
single.php 中身は空でOK
screenshot.jpg ※600×450ピクセル
style.css

テーマの選択・編集

上記必須ファイルを用意すると、管理画面においてテーマを選択できる。
テーマ → 有効化
テーマの編集 → (右側テンプレート一覧、スタイルシート一覧より)編集ファイルを選択

single.php

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>~</title>

 テーマディレクトリ内のstyle.cssファイルURIを出力&指定
 <ling rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
 <ling rel="stylesheet" href="https://office-yone.com/wp-content/thmes/test/style.css">
</head>
<body>

<?php if(have_posts()): ?>
 <?php while(have_posts()): ?>
  
  記事データ取得
  <?php the_post(); ?>
  $post
  $pages
  等の変数に記事データが格納される

  記事関連CSSクラス
  <article <?php post_class(); ?>>
  WordPressが自動生成して出力
  タイトル
  <h1><?php the_title(); ?></h1>
  日付
  <div class="postinfo">
   <time datetime="<?php echo get_the_date( 'c' ); ?>">
    <?php echo get_the_date(); ?>
   </time>
  </div>
  記事本文
  <?php the_content(); ?>
  <div class="navlink">
   <span class="navlink-prev">
    postsテーブルにおける前の日付の記事リンクを出力
    <?php previous_post_link(); ?>
   </span>
   <span class="navlink-next">
    postsテーブルにおける次の日付の記事リンクを出力
    <?php next_post_link(); ?>
   </span>
  </div>

  </article>
 <?php endwhile; ?>
<?php endif; ?>
</body>
</html>

style.css

@charset "UTF-8";

テーマの有効/無効選択画面等に表示される説明文
/*
Theme Name: ~ (例:test)
Author: ~ (例:office-yone)
Description: ~ (例:This is my original theme.)
Version: ~ (例:1.0)
*/

GoogleFonts使用設定(フォント「Chango」を指定)
@import url(http://fonts.googleapis.com/css?family=Chango);
body
{
 font-familiy: ' メイリオ ', 'Hiragino Kaku Gothic Pro', sans-serif;
 background-color: #edede3;  
}
.postinfo
{
 font-size: smaller;
 ~
}
.postinfo time
{
 font-size: 12px;
 ~
}

WordPress サブドメイン設定方法

サブドメインとは?

サイト内容を区分する為に、元のドメインと分けたURL
例:
元ドメイン office-yone.com
office-yone.com/blog/page1/
サブドメイン sub.office-yone.com
sub.office-yone.com/blog/page1/
サブディレクトリは
office-yone.com/blog1/~
office-yone.com/blog2/~
の様なドメイン下の階層の事。

サーバー設定方法

DNSサーバー:BIND9/サブドメイン」参照

WordPress設定方法

①wp-config.phpを編集(1回目)
例: /var/www/html/wp-config.php
/* 編集が必要なのはここまでです
の前に↓ を追加
define('WP_ALLOW_MULTISITE', true);

②WordPressプラグインを全て無効化

③WordPressネットワークインストール
WordPress管理画面
「ツール」→「ネットワークの設定」(新しく追加される)を選択
「サブドメイン」を選択
「インストール」を実行

④wp-config.phpと.htaccessをバックアップ

⑤wp-config.phpを編集(2回目)
/* 編集が必要なのはここまでです
の前に↓ を追加
define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', true);
define('DOMAIN_CURRENT_SITE', 'office-yone.com');
define('PATH_CURRENT_SITE', '/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);

⑥.htaccess編集
↓ を追加
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]

# add a trailing slash to /wp-admin
RewriteRule ^wp-admin$ wp-admin/ [R=301,L]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ – [L]
RewriteRule ^(wp-(content|admin|includes).*) $1 [L]
RewriteRule ^(.*\.php)$ $1 [L]
RewriteRule . index.php [L]

WordPress ユーザー権限

WordPressCodexユーザーの種類と権限

権限一覧

管理者
WordPress の全ての操作が可能。
編集者
コメントやリンクの管理などコンテンツに関する全ての操作が可能。
投稿者
記事の投稿や編集、公開が可能。
寄稿者
記事の下書きと編集のみ可能。
購読者
閲覧のみ可能。
会員制サイトを作りたい時などに使用。

権限毎に可能な操作一覧

 操作  管理者   編集者   投稿者   寄稿者   購読者 
 テーマの変更、編集 
 プラグイン設定 
 ユーザーの追加、編集 
 各種設定の編集 
 コメントの承認 
 カテゴリーの管理 
 リンクの管理 
 既存の記事の編集 
 固定ページの編集 
 メディアライブラリの管理 
 新規記事の投稿 
 新規記事の作成、編集 
 閲覧 

WordPress テンプレートタグ

判定

サイトのメインページか?
is_home()

サイトのフロントページか?
is_front_page()

個別投稿のページか?
is_single()

個別投稿のページのIDか?
is_single('(ID)')

個別投稿のページのスラッグか?
is_single('(スラッグ名)')
固定ページか?
is_page()

固定ページのIDか?
is_page('(ID)')

固定ページのスラッグか?
is_page('(スラッグ名)')

カテゴリーページか?
is_category()

タクソノミーのカイブページか?
is_tax()

モバイル端末か?
is_mobile()
↓ のis_mobile()関数をfunction.php等に作成する
スマホ表示分岐 is_mobile関数を利用するための関数設定
function is_mobile(){
 $useragents = array(
  'iPhone', // iPhone
  'iPod', // iPod touch
  'Android.*Mobile', // 1.5+ Android *** Only mobile
  'Windows.*Phone', // *** Windows Phone
  'dream', // Pre 1.5 Android
  'CUPCAKE', // 1.5+ Android
  'blackberry9500', // Storm
  'blackberry9530', // Storm
  'blackberry9520', // Storm v2
  'blackberry9550', // Storm v2
  'blackberry9800', // Torch
  'webOS', // Palm Pre Experimental
  'incognito', // Other iPhone browser
  'webmate' // Other iPhone browser
 );
 
 $pattern = '/'.implode('|', $useragents).'/i';
 return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

タグがあるか?
if(has_tag('(タグ名)')):

else:

endif;

WordPress基本情報出力

文字コードの指定
<meta charset="bloginfo( 'charset' );"> />
ブログ名
bloginfo('name');
ブログのURL
echo home_url();
CSS(スタイルシート)のURL
echo get_stylesheet_directory_uri();
JavaScriptの読み込み時のURL(jQueryなどの利用時)
wp_enqueue_script( 'スクリプト名', get_template_directory_uri().'/js/スクリプト名.js', array('スクリプトの種類'));
ディスクリプション(説明)
bloginfo('description');
記事のID(同じページ間での移動に使える)
the_ID();
記事の日付
the_time('Y年m月d日(D)');
記事の更新日
the_modified_date('Y年m月d日(D)');
記事のタイトル
the_title();
記事の本文
the_content();
記事本文の文字を制限して表示(140文字で区切って語尾に…を表示)
echo mb_substr($post->post_content,0,140).'…';
記事のURL(パーマリンク)
echo get_permalink();
記事の投稿者名
the_author();
前の記事へ・次の記事へ
<div class="previous">previous_post_link('%link', '? %title');</div>
<div class="next">next_post_link('%link', '? %title');</div>
記事の並び替え(昇順・降順)
(記事のループの前に下記を記述)
query_posts($query_string .'order=asc'); //昇順
query_posts($query_string .'order=desc'); //降順
カテゴリ一覧
wp_list_categories('title_li=');
カテゴリー名
single_cat_title();
タグ一覧
echo get_the_tag_list();

インクルードタグ

プラグイン動作用タグ(ヘッダー用:必須)
wp_head();
プラグイン動作用タグ(フッター用:必須)
wp_footer();
bodyへのclass設定対応
<body body_class();>
ヘッダーテンプレート
get_header();
サイドバーテンプレート
get_sidebar();
フッターテンプレート
get_footer();
コメントテンプレート
comments_template();
検索フォームのテンプレート
get_search_form();

WordPress ディレクトリ・ファイル構成

nsthink.com参照

ディレクトリ

wp-admin
管理画面系のファイルが格納されているフォルダ

wp-includes
API、クラス、関数が格納されているフォルダ

wp-content
テーマ、プラグイン、言語などで構成されているフォルダ

wp-content/uploads + 年月名フォルダ(例)
画像ファイル保存場所

wp-content/themes/(テーマ名)/
テーマ別ファイル

ファイル

起動時読み込み順序

WordPressではファイルを読み込む順番が決まっている。
読み込み対象が無ければ処理を飛ばし、最終的にindex.phpが読み込まれる。

index.php
テーマ使用判定


wp-blog-header.php
 以下の読み込み指示
 ・wp-load.php
 ・wp-config.php
 ・wp-settings.php
 ・wp-includes/template-loader.php


wp-load.php
起動ファイル:wp-config.php存在チェック


wp-config.php
DB情報チェック


wp-settings.php
wp-includesフォルダ内のファイルを読み込み
(変数・関数・クラス設定)

wp-includes/template-loader.php
テーマフォルダ(wp-content/themes/テーマ名)から、
テンプレートファイル(single.php、archive.php、index.php)等を読み込み

テンプレート階層

公式テンプレート階層図

テーマ別に左から順に読み込む
無ければ右側のファイルを読む

home.php
デフォルトでは作成されない。
あれば優先的に表示される。
通常、固定ページかindex.phpへの処理を振り分けに使用
single.php
記事を出力
page.php
固定ページを出力
index.php
全てのテンプレートが読み込まれた後に読み込まれる。

投稿ページ読み込み順序

投稿 single-post.php single.php

固定ページ読み込み順序

ページ
テンプレート
カスタム
テンプレート
custom.php page-$slug.php page-$id.php page.php
標準
テンプレート
page-$slug.php page-$id.php page.php

ファイルパス

\wp-content\themes\テーマ名

カスタムテンプレート

「テーマ名」ディレクトリ配下に、先頭位置に↓ の説明文を記述したphpファイルを作成する事で固定ページの編集画面において、
個別のテンプレートを選択できる。
<?php
 /*
  Template Name: (固定ページスラッグ名)
 */
?>
テンプレート内容~

デフォルトテンプレート

カスタムテンプレートファイルが無い場合、またはあっても選択しない場合、
page.phpが読み込まれる。

パーツテンプレート

ヘッダー

metaタグ情報、title情報等
page.php等からget_header();で呼び出し
↓と重複する部分はpage.phpからは削除しておく事
※header.php
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>~</title>
 <!--テーマディレクトリ内のstyle.cssファイルURIを出力&指定-->
 <ling rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
 <ling rel="stylesheet" href="~/wp-content/themes/test/style.css">
 
 <?php wp_head(); ?>
</head>
<body>
 <header>
  ヘッダー内容
 </header>

フッター

著作権等表示
page.php等からget_footer();で呼び出し
↓と重複する部分はpage.phpからは削除しておく事
※footer.php
 <footer>
  フッター内容<br/>
  <?php wp_footer(); ?>
 </footer>
</body>
</heml>

サイドバー

サイドバー表示
page.php等からget_sidebar()で呼び出し

コメント

コメント表示
page.php等からcomments_template();で呼び出し