テンプレートで最速更新するWordPressの作り方とは?

テンプレートで最速更新するWordPressの作り方とは?

本のまとめ

▼読んだ本は?
WordPressレッスンブックHTML5&CSS3準拠 by エビスコム
http://amzn.asia/aPBqWWX
▼WordPress(WP)とは?
■「HTML&CSS」と「記事コンテンツ」を分離して管理するコンテンツマネジメントシステム(CMS)
└「HTML&CSS」に関しては「phpテンプレート」として管理し、テンプレート内にデータベースの中のどの情報を取得するかを予めタグで記述しておく
└「記事コンテンツ」に関しては、「タイトル」「本文」などを1セットとしてデータベースに保存して管理

▼WPに用意されている様々なプラグイン(追加機能)とは?
■ WP Multibyte Patch:日本語関連の不具合を補正するプラグイン
■Contact Form 7:WP内部にフォーム機能を追加できるプラグイン
■Auto Post Thumbnail:記事コンテンツ内の1枚目の画像を、自動的にアイキャッチ画像として一覧ページに表示するプラグイン
■Media Grid:アップロードした画像を記事コンテンツ内にグリッド上に配置するプラグイン
■Front-end Editor:サイト表示側から各種記事コンテンツを修正できるプラグイン

▼テーマ(各記事コンテンツに適用する大枠のデザイン)を作る方法は?
【1】テーマ用のフォルダを作成し、その中に「style.css」ファイルを配置する
【2】「style.css」ファイル内部に「テーマ名」「作成者」など基本情報を以下のような形式で記載する
※テーマ名などに日本語を使う場合、ファイルをWordPressの文字コードとなるUTF-8で保存する必要があることに注意

 
/*
 Theme Name:MY THEME
 Author:TRAVEL SKETCH
 Description:This is my original theme
 Version:1.0
 */

▼テンプレートタグとは?
■テンプレート内に記述し、データベースからサイト情報や記事コンテンツ情報を呼び出し表示するためのタグ
■<?php タグ名(パラメーター名) ;?>形式で書く
※パラメーターを複数指定する場合は「&」にてつなぎ複数指定可能

▼WPの作成ページ・パーツタイプは?
■WPにはページ・パーツの利用方法により以下のような「ページタイプ・パーツタイプ」が存在し、それぞれ指定のファイル名で作成可能
└index.php:他に対象となるページタイプが存在しなかった場合、このファイル内に書かれた処理を元にページを生成
└page.php:管理画面「固定ページ」からページを作成すると、このファイル内に書かれた処理を元にページを生成
└single.php:管理画面「投稿ページ」からページを作成すると、このファイル内に書かれた処理を元にページを生成
└comments.php:ページ間共通のコメント投稿パーツとして作成し、他のページタイプに呼び出して利用
└header.php:ページ間共通のヘッダーパーツとして作成し、他のページタイプに呼び出して利用
└footer.php:ページ間共通のフッターパーツとして作成、他のページタイプに呼び出して利用
└front-page.php:トップページ専用のファイルとして作成

▼自由に固定ページ用のページタイプを作成するには?
【1】任意の名前かつphp形式でファイルを作成する
【2】ファイル内に以下記述を行う

 <?php
 /*
 Template Name : テンプレート名称を記載
 */
 ?>

▼自由にパーツタイプを作成するには?
【1】任意の名前かつphp形式でファイルを作成する
【2】そのパーツを呼び込みたいページ内に以下記述を行う

 <?php get_template_part() ;?>
// ※パラメーター内に、作成したファイル名を記述する

▼WPにおいて条件により処理を出し分けるには?
■if分岐文の中に処理を書く

 <?php if (); ?>
 //この中に具体的な処理内容【1】をテンプレートタグで書いていく
 <?php else: ?>
 //この中に具体的な処理内容【2】をテンプレートタグで書いていく
 <?php endif; ?>

■例えば投稿ページのみに処理を行う場合

 <?php if (is_single()); ?>
//  ※投稿ページのみに処理を行わない場合は「!」を付与

▼データベースから記事コンテンツデータを呼び出すためには?
■「ループ」と呼ばれるデータベースを読みにいく処理をタグとして追加しておくことが必要
【1】データベースに対し、対象記事コンテンツが存在するかを確認し、ある場合にのみ処理を開始するタグ

 if(have_posts())

【2】処理する対象記事が複数ある場合、複数回に渡って同一の処理を繰り返すタグ

 while(have_posts())

【3】何回処理したかをカウントし、かつ1つずつデータを適切に扱えるよう処理するタグ

 the_post()

※上記3つをまとめて、実際は以下のような形で記述していく

 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 //この中に具体的な処理内容をテンプレートタグで書いていく
 <?php endwhile; endif; ?>

▼各種WPサイト情報を呼び出すためのテンプレートタグは?
■WPサイトのURLを呼び出すタグ

 <a href="<?php echo home_url();

■WPサイトの名前を呼び出すタグ

 <?php bloginfo('name'); ?>

■WPサイトの説明を呼び出すタグ

 <?php bloginfo('description'); ?>

■WPサイトのRSSを呼び出すタグ

 <?php bloginfo('rss2_url'; ?>

■ページ階層に応じて最適なタイトル名を呼び出すタグ

 <?php wp_title(); ?>
// ※トップページでは何も呼び出さない
// ※例えば個別ページの場合「サイト名 >> 記事のタイトル」の形で呼び出される
// ※例えば月別ページの場合「サイト名 >> 2017>>4」の形で呼び出される

■カテゴリーページのカテゴリー名を表示するタグ

 <?php single_cat_title(); ?>
//  ※カテゴリーページ以外では何も表示しない

■「テーマ」フォルダへのURLを呼び出すタグ

 <?php echo get_templaete_directory_uri(); ?>

■「固定ページ」のIDをパラメーターで指定してリンクを出力するタグ

 <?php echo get_permalink(); ?>

■「固定ページ」のタイトルを元にIDを取得するタグ

 <?php get_page_by_title()->ID; ?>

▼WP管理画面用のヘッダー/フッターを呼び出すためのタグは?
■WP管理用のヘッダーを呼び出すためのタグ

 <?php wp_header(); ?>

■WP管理用のフッターを呼び出すためのタグ

 <?php wp_footer(); ?>

▼WP表示画面用の共通ヘッダー/フッターを作成する方法は?
■ヘッダーの作成
【1】「header.php」ファイルを作成
【2】ヘッダーを表示したいページテンプレートファイル側に以下を記述

 <?php get_header();?>

■フッターの作成
【1】「footer.php」ファイルを作成
【2】フッターを表示したいページテンプレートファイル側に以下を記述

 
<?php get_footer();?>

▼データベースから「記事コンテンツ」情報を呼び出すテンプレートタグは?
■各「記事コンテンツ」内部の「タイトル」箇所を呼び出すタグ

 <?php the_title();?>

■各「記事コンテンツ」内部の「本文」箇所を呼び出すタグ

 <?php the_content();?>

■各「記事コンテンツ」に対して固有の「class」を付与するタグ

 <body <?php body_class();?>>
// ※基本は<body>タグ内に記述

■「style.css」へのリンクを呼び出すタグ

 <?php echo get_stylesheet_url(); ?>

■各「記事コンテンツ」が属するカテゴリを呼び出すタグ

 <?php the_category(',');
//※パラメーター内に文字列を指定すると、複数カテゴリの間に「,」など文字列を挟む

■各「記事コンテンツ」の前の記事へのリンクを呼び出すタグ

 <?php previous_post_link(); ?>

■各「記事コンテンツ」の次の記事へのリンクを呼び出すタグ

 <?php next_post_link(); ?>

■各「記事コンテンツ」自体のリンクを呼び出すタグ

 <?php next_permalink(); ?>

■各「記事一覧」の前の記事一覧へのリンクを呼び出すタグ

 <?php previous_posts_link(); ?>

■各「記事一覧」の次の記事一覧へのリンクを呼び出すタグ

 <?php next_posts_link(); ?>

■各「記事コンテンツ」において、個別ページ+特定カテゴリ内である記事のみを表示するタグ

 <?php if (is_single()) && has_category('カテゴリ名'); ?>

■各「記事コンテンツ」において、個別ページ+特定タグ内である記事のみを処理するタグ

 <?php if (is_single()) && has_category('タグ名'); ?>

■各「記事コンテンツ」において、個別ページ+サムネイルを持つ記事のみを処理するタグ

 <?php if (is_single()) && has_post_thumbnail(); ?>

■各「記事コンテンツ・本文」の中の先頭の文字列を取得し、概要として表示するタグ

 <?php the_excerpt(); ?>

■各「記事コンテンツ」へのリンクを表示するタグ

 <?php the_permalink(); ?>

▼本文「概要」に表示される内容を調整するには?
■以下関数を記述し「return」の数値を変更することにより「概要」の文字数を変更

 function my_length($length){
 return 70;
 }
 add_filter('excerpt_mylength' , 'my_length');

■以下関数を記述し「return」の文字列を変更することにより「概要」の最終文字を変更

 function my_more($more){
 return '...';
 }
 add_filter('excerpt_more', 'my_more');

▼プラグイン以外でWP機能を増やす「ウィジェット」の使い方は?
■「functions.php」というファイルを作成し、その中にphpで記述を行っていく

 <?php if
 //この中に具体的な追加ウィジェット内容を書いていく
 ; ?>

▼サイドバーウィジェットの追加方法は?
【1】サイドバー機能を管理画面に追加するタグを「functions.php」記述する

 register_sidebar();

【2】サイドバーを追加したいページに以下タグを記述する

 <?php dynamic_sidebar() ;>

※サイドバーを複数作成している場合、パラメーター内部に「1」「2」を記載し、何個目のサイドバーを表示するか指定可能

▼RSS機能の追加方法は?
■RSSフィードのURLをアプリ用に<head>内に生成するタグ

 add_theme_support('automatic-feed-link');

▼ナビ・ヘッダーを管理画面から調整できるようにするには?
■グロナビなどメニュー機能を管理画面に追加するタグ

 register_nav_menu('名前','説明');
// ※「名前」「説明」をパラメーターとして付与

■ヘッダー内の画像管理(カスタムヘッダー)機能を管理画面に追加するタグ

 add_theme_support('custom-header');

▼コメント投稿欄の追加方法は?
【1】「comments.php」というファイルを作成し、その中に以下記述を行う

 <?php comments_form() ; ?>

【2】コメント投稿欄を表示したい箇所に以下記述を行う

 <?php comments_template() ; ?>
// ※パラーメーターに'format=html5'を記述すると
// HTML5形式となる
// ※パラーメーターに'title_reply=コメント'を記述すると
// タイトル箇所が「コメント」記載となる
// ※パラーメーターに'label_submit=送信'を記述すると
// ボタン箇所が「送信」記載となる

【3】投稿済みコメントを記事コンテンツ内に表示する場合、以下記述を行う

 <ul><?php wp_list_comments(); ?></ul>
// ※パラーメーターに'avatar_size=0'を記述すると
// アイコン画像が非表示となる
// ※パラーメーターに'max_depth=1'を記述すると
// 返信欄が非表示となる

【4】投稿されたコメントが無い場合に、余計な要素を表示しないよう、以下記述を行う

 <?php if(have_comments()); ?><?php endif ; ?>

【5】投稿されたコメント数を表示するために、以下記述を行う

 <?php comments_number(); ?>
// ※パラーメーターに'コメント','コメント1件','コメント2件'を記述すると、
// コメントがそれぞれの件数の際の表示が切り替わる

【6】各コメントへのリンクを表示するために、以下記述を行う

 <?php comments_link(); ?>

【7】トラックバックを送ってもらう場合、以下記述を行う

 <?php comments_link(); ?>

▼一覧ページに表示するアイキャッチ画像を追加するには?
【1】functions.phpに以下記述を追加

 add_theme_support('post-thumbnails');

【2】サイトページ内にアイキャッチ画像を表示するタグを追加

 <?php the_post_thumbnail() ; ?>

【3】アイキャッチ画像が登録されていない場合に、該当箇所を消す処理を追加する

 <?php if(has_post_thumbnail()) : ?>
 <?php endif; ?>

思ったこと

データベースに「記事コンテンツ」を登録しておき、予めシステムが用意されているテンプレートタグを利用することにより、php形式で自由にデータベース内から情報を取り出し表示できるCMS(コンテンツ管理システム)であるWordPressの使い方を、初心者向けに詳しく記載した本でした。

自分のようにエンジニアではない人間に対しても、比較的わかりやすく丁寧に説明をしてくれていて、かつ同様の内容を繰り返し記載してくれているため、途中で心折れることなく最後まで読み切れる形になっていました。

しかし、WordPress便利だなー。オープンソースで内部コードを誰でも読み溶けるためセキュリティとの兼ね合いは常に発生しますが、やっぱりWordPress使いこなせれば、他のシステムとか使える必要も特にないのではと感じてしまったりもします。そして、多様なテンプレートが展開されているWordPressがあれば、そもそも無理してお金かけてWEBサイトを作るというのはもう不要なのかもしれません。

毎年トレンドが移り変わるデジタルに触れる限りは、最も重要なのはオリジナリティや高品質であることではなくて、移り変わるスピードを理解し、今世の中に存在するプラットフォームやシステムを利用し、そしてそれらをAPIを利用してつなぎ合わせ、最速でソリューションを提供し続けることなのかなと思ったりもしました。

ありがとうございました!

関連する記事