カテゴリー別アーカイブ: WordPress

2月27日(土) CMS演習⑩ 講義内容

WordPress、サーバーへのアップロード

これまで、ローカル環境(Xampp下)でWordPressの制作を行ってきた。
もちろん通常のWebサイトと同様、このままではインターネット上で閲覧する事は出来ない。
Xamppはあくまでテスト環境であり、公開前に見た目や機能を試す役割に過ぎない。
その為、最終的にはレンタルサーバー等にアップロードする必要性がある。
以前にも触れたが、サーバーによってはPHPやMySQLが使えない(=それらを利用しているWordPressも使えない)ので注意しよう。

今回は以前配布したhetemlのサーバーで設定を行った。
接続自体は依然行っているので、必要なのは、

  • DBホスト名
  • DBユーザー名
  • DBパスワード

の三つの情報になる。通常は「データベース名」も必要だが、配布したサーバーではユーザー名と同じ名前のデータベース一つしか扱えないように設定されている為、ユーザー名と同じものを使用する。
これはXamppへのWordPress導入時や、PDOの講義の時にも設定したものだが、ホスト名は「localhost」、ユーザー名は「root」、パスワードは空という、仮の設定だった。
WordPressはデータベース内に投稿や設定などのデータを保存する為、データベースに接続しなければならず接続する為に最低限必要な情報がこの三つになる
今回は紙で配ったものだが、通常のレンタルサーバーであれば、契約後にログインできる「マイページ」等に同様の情報が載っている。
*掲載場所はサーバーによって変わるので注意!

wp_config.phpの編集

WordPressをインストールしなおす際に、上述の必要情報を設定するファイル。
アップロード用のwordpressを用意(今回は、xampp内のWordPressを、Lessonにコピーした)。
コピーした(或いは新規にダウンロードした)WordPressフォルダの直下にある「wp-config.php」の該当箇所を書き直す。他の部分は書き換えない事!

define('DB_NAME', '使用するデータベースの名前');

/** MySQL データベースのユーザー名 */
define('DB_USER', '使用するデータベースのユーザー名');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', '使用するデータベースのパスワード');

/** MySQL のホスト名 */
define('DB_HOST', '使用するデータベースのホスト名');

それぞれ必要情報を書き込んで、アップロードすればOK。
注意しなければならないのは「データベース名」で、今回配布したサーバーではユーザー名と同じ名前のデータベースを利用してもらっているだけ。
通常は、Xamppの時と同様に、専用のデータベースを作成する必要がある。

アップロードと設定

configファイルの準備が出来たら、サーバーに接続し、wordpressフォルダをそのままアップロードする。(容量が大きいので、それなりに時間がかかります)。
アップロード終了後、ブラウザで、「閲覧URL/wordpress/」にアクセスする。
成功していれば、xamppの時にも設定した、サイト名などを入力できるエリアが生成される。「データベース確立エラー」等が表示される場合は、先に設定した項目のいずれかが間違っている可能性が高いので、修正してwp_confing.phpだけをアップロードしよう。

後の設定はXamppの時と同じ。
サーバー上のものは、一応パスワードが「普通」以上になるよう設定した上で、きちんと通じるメールアドレス(パスワードを忘れた時にメール送信される)を設定しておこう。

エクスポートとインポート

wp_transport
WordPressの移転作業では、フォルダとは別にデータベースの内容も移行する必要がある

ここまででWordPressのインストールができた。
今回はテーマなどのフォルダごとアップロードした為、見た目の変更などは直ぐにできる。
しかし、WordPressの投稿などのデータはデータベースの中に保存されている為、まだ参照されていない。
つまり、投稿や固定ページなどを移動するには、データベース間の引っ越しも必要になる。
そこで使われる作業が、エクスポート(データの書き出し)とインポート(データの読み込み)である。
インポートとエクスポートはダッシュボードの「ツール」から行える。

データを書き出したい方(移行前のWordPress)から、
ツール>エクスポート>全てのコンテンツ(必要に応じて、投稿等だけを選択してもいいと思います)>エクスポートファイルをダウンロード
すると、移行情報のつまったxmlファイルがダウンロードされる。

次に、移行先のWordPressで
ツール>インポート>WordPress(この時、初インポート時のみ、インポート用プラグインのインストールが必要になります)→ファイルを選択→エクスポートしたxmlファイルを選ぶ→ファイルをアップロードしてインポート

バックアップとしてのエクスポート

今回のような引っ越し目的とは別に、データのエクスポートを行う事がある。
それがバックアップファイルとしてのエクスポートファイルの排出である。
基本的にデータベース内のデータが壊れてしまう事態には余り陥らないが、万一に備えて復旧できるよう、データを取っておくことが推奨される。
自分で定期的にエクスポートしても構わないが、BackWPUpというプラグインで周期を設定し、自動バックアップを取れるので、長期運用サイトの場合は利用してあげよう。

エクスポート・インポートの注意点

これでWordPressの引っ越し完了! ……と言いたいところだが、幾つか落とし穴が存在している。
実はこれだけでは、きちんと移動できない部分が存在する。

  • メディア画像(のURL)
  • ウィジェット
  • プラグイン毎の設定

これらのデータはエクスポートの範囲に含まれないので、設定しなおす必要がある。
特にメディア画像は、URLが元々のもの(今回はlocalhost)のままになってしまう為、問題が大きい。

こちらのサイト様ではインポートエクスポートの手順に加え、プラグイン「Search Regex」を使ったディレクトリの変換での解決策まで書いてくれているので、参考にしていただきたい。

ウィジェットに関しても、最近は良いプラグインがあるようなので、量が多い時は使ってみよう。WordPressサイトの移転時に強い味方になる6つのプラグイン

プラグインの設定移行

プラグイン個別の設定の移行は、基本的にそれぞれ手作業で行う必要がある。
しかし使うプラグインの量が多ければ、それだけ手間になる。
そこで今回の様にダッシュボード上からのエクスポート・インポートではなく、データベースから直接全てのデータをエクスポート・インポートする方法がとられる場合がある。
(ダッシュボード上のものは一部のデータを移行するだけなので、全移行するとデータベースに自動生成されたデータまで移行は出来る)
ただし、もちろんだが直接データベースを触る上、一部設定情報を書き換えなければならない関係上かなり上級者向きにはなるので、自信が無ければやめておこう。
参考:WordPress移転phpMyadminデータベースを使ってまるごとサーバー引っ越し
移行の手間を考えると、プラグインの導入数自体を減らしておくのも一つの方法にはなる

CMS演習⑦~⑨ 講義内容 「WordPressのテーマづくり」

遅くなってすみません。もう少し追記・修正していきますが一次アップします。説明漏れあれば教えてください。追記します。

WordPressのテーマづくり

普段お世話になっているWordPressのテーマ。もちろん、誰かが作っているものなので、自分で作ることも出来る。
「0から全て制作する」という点においてはテーマのカスタマイズよりも大変な部分もあるが、しっかり習得するとより自由なデザインのページが作れるし、なによりWordPressの構造自体の理解も進むので、カスタマイズにも役立つ。
まずはどんな風に作られているのか、ざっと理解しておくと、仕事の幅が広がる。

テーマ作成において、WordPressは通常のブログよりも自由度が圧倒的に高く、様々な形式のサイトに利用される理由の一つでもある。

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました
僕が初めてテーマを作った時に参考にしたページです。ちょっとだけ今回の手順と違いますが、図解が分かりやすいので参考にしてみてください

WordPress テーマのディレクトリ構造

WordPress本体には、様々なフォルダやファイルが存在している。
テーマのデータも、その中の一部である。

wp_structure
テーマフォルダにある有効化されたテーマを、wordpress/index.phpが読み込む

wordpressフォルダを開くと、大きく三つのフォルダに分かれており、その中の
「wp_content」→「themes」
フォルダの中に、インストール(ないし初期から入っていた)テーマが保存されている。
自分でテーマを作成するときも、ここに作っていく形になる。

テンプレートファイル

WordPressには、いくつかの名前の定められたテンプレートファイルがある。
基本的に、これらのファイルはテーマフォルダの直下に保存する必要がある。
種類がいくつかあるので、種別で紹介したい。

絶対に必要なファイル

子テーマの際にも触れたが、index.phpstyle.cssはWordPressのテーマを公開するうえで、最低限必要なファイル。
存在しなかったり、ファイル名が違ったりすると、テーマの有効化すら出来ない。
もし「外観」画面に作ったはずのテーマが出ていなかったら、この辺りのファイルをきちんと確認しよう。
詳細はこちらの記事へ。

この二つに加えて、「functions.php」も重要なファイルになっている。
このファイルには、WordPressで使用したい機能や、元々ある機能の部分変更など、様々な命令を書き加えていく事が出来る。なくてもテーマの有効化は出来るが、ここへの記述がないと、WordPressのほとんどの機能は使えないので、必須と言っても過言ではない。

パーツになるファイル

WordPressは、headerやfooterなど、共通部分を多数のページに読み込む為のファイル。
作成しているテーマフォルダ直下に、特定の名前で保存しておく必要がある。
WordPressでは、特別な名前のファイルが特別な意味を持つことが多い。

wp_structure2
共通部分を別ファイルとして保存しておくことで、修正があった場合に作業量を大きく減らすことが出来る。テンプレートが増えれば増えるほど、有効な手段になる。
header.php
読んで字のごとくページのヘッダー部分を記述するファイル。
読み込むCSSやナビゲーション部分など、全ページに共通する項目を書いておき、色んなテンプレートで読み込むことが出来る。
また、if文による条件分岐で、特定のページだけに情報を読み込ませることも可能。
表示させたい場所に「get_header()」と記述することで読み込める。
footer.php
headerと同様、ページ下部も共通する場合が多いので、ファイルを分けておくと便利。
表示させたい場所に「get_footer()」と記述することで読み込める。
sidebar.php
サイドバーを個別に保存しておけるファイル。
名前は「sidebar.php」だが、ようは共通部分であればどの部位でも構わないので、テーマによってはこのファイルに特定部位の設定が書かれている事もある。
表示させたい場所に「get_sidebar()」と記述する事で読み込める。

ページを表示する為のテンプレートファイル

切り分けたパーツ(header.phpなど)を、表示用のテンプレートで読み込み、実際にサイト上に表示させる。
WordPressでは、「投稿ページ」「固定ページ」などを表示する為の専用ファイルがそれぞれ用意できる。
因みに、index.phpは表示用テンプレートの親玉みたいなもので、該当するファイルがなかった場合(例えば固定ページを表示するのに、page.phpがないなど)、代わりにindex.phpで表示される仕様になっている。

また、細分化すると今日までに使用したファイルよりもかなりの数のテンプレートが存在するので、一緒に掲載する。

single.php
投稿ページを表示する為のテンプレート。
タイトル、日付、本文、カテゴリーなど、必要な情報を選定して載せる。
今回は抜粋文→全文表示への変更だけだったが、テーマによっては色々と載せ方を変更したり、工夫がみられる。
page.php
固定ページを表示する為のテンプレート。
single.phpと似通る部分が多いので、別名保存などで作ってあげると楽。
こちらはsingle.phpよりも更に情報が少なくなることが多い。
404.php
wordpress/以後、存在しないURLにアクセスすると表示してくれるテンプレート。
用意しておくと、記事を消してしまった時などを含めてよりユーザーフレンドリーなページになる。
archive.php,category.php,tag.php
日別一覧、カテゴリー一覧、タグ一覧を表示する専用ページ。
なくてもindex.phpで一覧表示してくれるので問題はないが、それぞれ個別に設定することで見た目を変更できる。
一般のテーマで多いのは、ページ上部に何のカテゴリーを表示しているかなどを出すパターン。

制作フロー

今回は大本になるHTMLとCSSがあること前提。
既にできているサイトに、WordPressの機能を当て込める形で作成した
デザイン→コーディング→テーマ化
という手順を踏むと、作業工程が分かりやすく、役割分担もしやすい。
ただしデザイン時点で、WordPressのどんな機能を当て込めるかを考える必要は出てくるので、デザイナーも予備知識として、大まかな動きが分かると尚良い。

順番は人それぞれではあるので、参考程度に。

  1. ベースになるHTMLやCSS等のファイルを一つのフォルダにまとめ、wp-content/themesフォルダの中に保存する。
    一応、HTML等のバックアップを取っておくとなお良い。
  2. style.cssにテーマ設定を入力。

    /*
    Theme Name: Simple WebB
    Auther: Interplan IT School ShinYkohama
    Description: テーマ作りの練習です
    version:1.0
    */
    

    上部にコメントアウトで情報を記入する。
    最低限Theme Nameだけ記述されていれば動くので、とりあえず好きな名前を付けてみよう

  3. index.phpを作成する。
    元々htmlファイルがあるなら、名前をindex.phpに変更すればOK。
    この時点で、wordpressダッシュボードの「外観」→「テーマ」から、有効化が出来るようになる。
  4. 有効化し、サイトを表示してみると、CSSや画像が読み込まれていないことが分かる。
    これはthemesフォルダの中で、相対パスで読み込もうとしている為。

    WordPressは、有効化したテーマのindex.phpをwordpress/index.phpで読み込む設計になっている(実際に表示する時にアドレスがシンプルになる)為、実際にはwp_content/themes/有効化したテーマ/の中に入っているファイルの位置が正確に読み取れなくなってしまう。

    そこで使われるのが、「get_template_directory_uri」というテンプレートタグ。
    有効化したテーマまでの絶対パスを取得してくれるので、パスが変わってしまったcssやimgをちゃんと読み込めるようになる。

    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
    

    パスを読み込む部分の手前に設定することで、特定のファイルを読み込めるようになる。

  5. テーマに必要な情報を読み込むためのテンプレートタグを書いていく。
    各テンプレートタグには、サイトのタイトルや、投稿ページへのリンクなど、様々な情報が入っている。
    該当する箇所に、該当するテンプレートタグを書き込むことで、それぞれの投稿等の情報がきちんと表示される。
  6. 投稿を表示する、メインループを作る。
    投稿を表示する際に繰り返し文、whileを利用する事がから、WordPressでは投稿記事を表示する部分を「メインループ」と呼ぶ。

    <?php if(have_posts()): ?>
    	<?php while(have_posts()): the_post(); ?>
    		//記事部分のHTMLを記載
    	<?php endwhile; ?>
    <?php endif; ?>
    

    「もし記事が一件でもあれば」「記事のある限り」「記事を表示する」
    といった意味合いになる。
    色んなテンプレートに記載するので、最近では「共通のパーツ」として別ページに記載する事も増えている。

  7. functions.phpを作成し、カスタムメニューやウィジェット機能を有効化する。
    もちろん、利用しないという選択肢もあるが、ウィジェットはともかくカスタムメニューは大抵の場合使った方が楽なので、きちんと記述してあげると良い。
    functions.phpには他にも様々な設定を書けるので、必要に応じて記述を増やしていく。
  8. index.phpの機能が整ったら、パーツを分割する。
    「全ページに共通する部分」を抜き出し、「header.php」「footer.php」等として保存し、「get_header」「get_footer」等で読み込む。
  9. single.php、page.phpといった、index以外のファイルを必要なもの分だけ作成する。
  10. 完成!

使用したテンプレートタグ一覧

WordPressの中だけで使える関数(機能)を、まとめてテンプレートタグと呼ぶ。
header.phpなどのテンプレートを読み込んだり、データを出力したり、その種類は多岐に渡る。
WordPress Codex 日本語版に、それぞれの設定方法などが詳しく載っているので、詳細はこちらを参考に。

get_template_directory_uri()
有効化しているテーマまでのhtttp:からの絶対パスを取得してくれるテンプレートタグ。
テーマを作る際、cssやimg等を読み込むときに重宝する。
wp_head()
wordpressテーマに必要なファイルを読み込む。テーマには必ず必要なので、最初に記述しよう。
headの一番下、</head>の手前に書いてあげよう。
wp_footer()
管理画面と表示サイトを行き来する黒いバー(通称アドミンバー)を表示してくれる他、js等の必要ファイルを読み込む。
テーマには必ず必要なので、最初に記述しよう。
こちらはbodyの一番下、</body>の手前に書いてあげると良い。
bloginfo()
様々な情報を引き出せる便利タグ。例えば
bloginfo(‘name’);
なら、設定画面で登録されたサイト名を表示してくれる。
他の設定:テンプレートタグ/bloginfo
home_url()
サイトのトップページへのリンクを出力できるタグ。
実際に利用する際は、

と記述してあげる必要がある。echoしないと出力できない。
have_posts()
利用しているWordpressに、「投稿があるか」を判別してくれるタグ。
記事を読み込むメインループでは、まずこのタグを使って、
「もし投稿が一つでもあったら、投稿がある限り記事を出してね」
という指定になる。
the_post()
記事を読み込むメインループにて、次の記事を取得する為のタグ。
for($i=0; $i<10; $i++) でいうところの「$i++」と同じ役割になる。 これがないと無限ループに陥るので、忘れない様に。
the_title()
ループ中で読み込まれた記事のタイトルを表示する為のタグ。
the_excerpt()
記事本文の抜粋文を表示する為のタグ。
表示の長さの設定や、後ろにつく文字列をfunnctions.phpで変更できる。
index.phpなど、記事一覧を出すページで用いられることが多い。
the_content()
記事本文の全文を表示する為のタグ。
single.phpやpage.phpなど、記事の詳細画面で記述し、全文読める様にする。
画像等が使われているとそちらも出てしまうので、トップページなどで使う時には注意が必要。
the_permalink()
記事詳細へのURLを取得してくれるテンプレートタグ。
記事タイトルやアイキャッチ画像等、色んなところにリンクを貼っておくと、個別の記事ページに誘導しやすい。
get_the_date()
日付を表示してくれるテンプレートタグ。
the_dateだと同一の日付の投稿があると一番新しいものしか表示してくれないのだが、
「echo get_the_date();」と書いてあげるとちゃんと出てくる。
WordPressの設定画面で使われている日付を利用する場合は、「echo get_the_date(get_option(date_format));」
と記述する。
has_post_thumbnail() , the_post_thumbnail()

記事にアイキャッチ画像があるかどうかの判定と、アイキャッチ画像の表示。サムネイルのスペルに注意。

<a href="<?php echo the_permalink(); //投稿ページへのリンク ?>">
	<?php if(has_post_thumbnail()): //もしアイキャッチ画像があったら ?>
		<?php the_post_thumbnail(表示サイズを指定); //アイキャッチ画像を表示 ?>
	<?php else: //無かったらno-image.pngを表示 ?>
		<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" width="260" height="260">
	<?php endif; //if文終わり ?>
</a>

上記の様に、条件文とセットで使われることが多い。

the_category()

記事に登録されているカテゴリー一覧を表示してくれる。

のように、括弧の中にそれぞれのカテゴリーの区切り文字を入れることが出来る。

edit_post_link()
投稿記事や固定ページに「編集」ボタンを付けることが出来る。
わざわざダッシュボードや個別ページに跳ばなくても記事の編集が出来るので、投稿者には便利な機能。
ログアウト時(お客さんが見る時)は自動で消えてくれるので安心。
wp_nav_menu()
functions.phpで設定した、カスタムメニューを表示するテンプレートタグ。
オプションが多いので、配列で入力する必要性がある。

$menu_setting = array(
	'theme_location' => 'gloval', //表示したいカスタムメニュー名
	'container' => 'nav', //囲う為のタグ
	'container_class' => 'wrap' //囲うタグに付けるクラス名
);
wp_nav_menu($menu_setting);

オプション一覧はこちら

the_posts_pagenation()
「ページャー」「ページング」「ページネーション」等と呼ばれる、記事数が表示数を超えた時に次のページへ移動できるリンクを精製するテンプレートタグ。

the_posts_pagination( array(
	'prev_text'          => '&lt;',//prevに表示するテキスト
	'next_text'          => '&gt;',//nextに表示するテキスト
	'before_page_number' => '<span></span>',//ページナンバーの手前に付ける文字列
) );

比較的新しく、以前は大変だったページングの実装を大幅に簡単にしてくれた。
出力されるタグやクラスが決まっているので、それに合わせてCSSを作り、見た目を変更すると良い。

dynamic_sidebar()
functions.phpで設定したウィジェットエリアを表示してくれる、なんだかカッコイイ名前のタグ。
sidebarとつくが、サイドバー以外でも問題なく使用できる。

と書くと、ダッシュボードで設定されたウィジェットを表示することが出来る。
get_header()
header.phpを読み込んでくれるテンプレートタグ。
各テンプレートにしっかりつけてあげよう。
get_footer()
footer.phpを読み込んでくれるテンプレートタグ。
get_sidebar()
sidebar.phpを読み込んでくれるテンプレートタグ。
貼る場所を間違えない様にしよう。他二つと違い、使われない事も多い。
previous_post_link,next_post_link
投稿ページに使用できる、「前の記事」ないし「次の記事」へのリンクを精製してくれる。single.phpの下の方に搭載されているテーマが多い。

<ul class="pager">
	<li class="prev"><?php previous_post_link('&lt; %link'); ?></li>
	<li class="next"><?php next_post_link('%link &gt;'); ?></li>
</ul>

括弧の中には表示文字列を書く。
「%link」は、記事タイトル付で前後のページへのリンクを表示してくれる。

functions.phpで使用したテンプレートタグ・命令

functions.phpは、WordPress初心者の壁ともいえるとっつきにくいファイル。
主に使いたい機能を有効化したり、各種設定を書き込むのに使われる。

add_theme_support()
デフォルトでは使えない、様々な機能を有効にする設定。
括弧の中に有効にしたい機能を書く。
add_theme_support(‘post-thumbnails’);はアイキャッチ画像が、
add_theme_support( ‘menus’ );ならカスタムメニューが使えるようになる。
また、多数のテーマで使われている、「カスタムヘッダー」や「カスタム背景」もこの機能で有効にできる。
add_image_size();
WordPressメディアに画像を上げる時、複数のサイズで登録される。
この指定を書くことで、好きなサイズの画像をアップロードさせられる。
add_image_size(‘blog_thumbnail’, 260, 260,true);
名称、縦横のサイズの後に「true」を入れると、size比の合わない画像の中央を自動でトリミングしてくれる。
register_nav_menus()
カスタムメニューの設定。
カスタムメニューは同じテーマに何個でも設定できるので、それぞれに「メニューの名前」と「説明」を付ける必要がある。

register_nav_menus(array(
        'メニュー名称(好きな名前)' => 'ダッシュボード側に表示される説明',
         //何個も同時に設定できる
	'gloval' => 'グローバルナビゲーション',
	'foot_nav' => 'フッターナビゲーション'
));

ここで名前を設定し、wp_nav_menu();に名前を入れる事で、ようやくカスタムメニューが使えるようになる。

register_sidebar()
ウィジェットエリアを作成する設定。これがあって初めて「ウィジェット」メニューがダッシュボードに現れる。

register_sidebar(array(
	 'name' => 'widget名',
	 'id' => 'widgetID',//呼び出す時に名前の代わりに使える
	 'description' => 'widgetエリアの説明(ダッシュボードに表示)',
	 'before_widget' => '<div class="widget">'//ウィジェットを囲うタグや文章の設定,
	 'after_widget' => '</div>',
	 'before_title' => '<h3 class="widget_title">'//ウィジェットタイトルを囲うタグや文章の設定,
	 'after_title' => '</h3>'
));

複数のエリアを作る時は、その分だけ上の様な設定を書いてあげる必要がある。

番外:抜粋文の設定
//抜粋文の文字数設定
function custom_excerpt_length( $length ) {
	return 100;	
}	
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

	
//抜粋文省略時に続く文字列の設定
function new_excerpt_more( $more ) {
	return '[ … ]<a class="more" href="'. get_permalink( get_the_ID() ) . '">more</a>';
}
add_filter( 'excerpt_more', 'new_excerpt_more' );

WordPressデフォルトの設定を変更する時、「add_filter()」という命令が使われる。
これは「フィルターフック」と呼ばれる、WordPressのどこかで設定されている変数に、データを上書きできるという優れた機能。……なのだが、見た目に分かりにくく、初心者の壁の一つとなっている。
「excerpt 文字数変更」などの検索ワードで出てくるので、色々と試してみよう。

他にもいろいろな設定ができるが、今回は抜粋文の文字列と、後に続く文章を変更した。
こういった設定も、functions.phpに記述される。

2月20日(土) CMS演習⑤ 講義内容

WordPressをさらに便利に! 色々なプラグイン

WordPressの特徴の一つに、多様なプラグインがある。
ユーザー数が多い=開発者も多く、多種多様なプラグインが日々追加されている。
プラグインとは拡張機能の事で、デフォルトでは備わっていない様々な機能を補う事が出来る。種類が余りにもおいので、纏めサイトや検索を上手く使って、必要で効果的なプラグインを導入していこう。

プラグインの導入

プラグインの導入自体は、テーマの時とあまり変わらない。
ダッシュボードの「プラグイン」から「新規追加」を選択し、欲しいプラグインを検索すれば良い。
インストールした後は、「有効化」しないと使えないので注意しよう。

導入までは全てのプラグイン共通だが、使い方はそれぞれのプラグインによって大きく異なる。
有名なものであれば日本語での紹介サイトも多いので、紹介記事がどれだけあるかも判断基準の一つになる。
大抵の場合、ダッシュボード内のどこかに設定メニューが追加されているので、まずはそれを探すと良い。
どこにメニューが増えるかは作り手の意図によるが、一番外側や「設定」の中にある場合が多い。

プラグインの紹介

講義で解説したものに加え、いくつか紹介したいと思います。

WordPressインストール時に入っているプラグイン

三つほど、常に初期でインストールされているプラグインがある。
必要に応じて有効化しよう。

akismet
スパムコメントを弾いてくれる有能なプラグイン。
コメント機能を使う際は必須と言っていい。
ただ有効化するだけでは効果がなく、wordpress公式への登録とキーコードの設定が必要になる。
【Akismet】スパムコメントを防ぐ!WordPressプラグイン
WP Multibyte Patch
WordPressはもともと英語圏のシステムなので、文字数の設定が1バイト単位で行われている。
これは日本ではマルチバイト(一文字に2バイト以上)の全角文字が一般的なので、そちらに設定変更してくれるプラグイン。有効化しておくと時折問題になる間違いがなくなる。
とりあえず有効化すると良い。
Hello Dolly
これはただのプラグインではありません。
有効化すると、なんとダッシュボードの右上に、世界的に有名な歌、「Hello Dolly」の歌詞の一節をランダム表示するという素晴らしい機能をもっている。
……ようは慣例的にインストールされている、冗句プラグイン。WordPress公式の遊び心が垣間見える。
真っ先に削除されることも多いのだが、なんとなく削しづらい。興味があれば有効化してみよう

機能的に便利なプラグイン

All in One SEO Pack
通常に利用するサイトの場合、ほぼ必須と言ってもいいプラグイン。
WordPressにおけるSEO対策の決定版ともいえる。かなり多機能だが、ページ単位でタイトルやメタキーワードが入れられたりと、細かいSEO対策が可能。
Welcart
WordPress用のショッピングカート制作用プラグインで一番有名なもの。
かなり多くの設定が出来、カスタマイズ性も高い。しっかり使うにはそれなりの知識が必要になる。

ただし、ECキューブなど、ECサイト専用のCMSも存在するので、ショッピングサイトを構築する場合はそもそもどのシステムを利用するかから検討する必要がある。WordPress「でも」ショッピングサイトが出来るという事が重要。

jetpck
超多機能プラグイン。一口で説明できないくらい色んな機能が内包されている。どちらかというと、色んな有名プラグインをまとめて導入できるもの。
「これさえあれば何もいらない」くらい多機能な反面、使用しない機能も多くなってしまうので、使いどころは考えどころ。
一つ、二つの機能のみを設定するのであれば、専用プラグインの導入を検討してもよいかもしれない。
Jetpack by WordPress.comプラグインの使い方
実に31種類もの機能を内包するマンモスプラグイン
Contact Form7
簡単にお問い合わせメールフォームが設定できる。
拡張機能も多く、使いやすいのが利点。WordPressで一番有名なプラグインかも知れない。
Contact Form DB
コンタクトフォーム7に入力された内容を、データベースに格納してダッシュボードで閲覧できるプラグイン。
唯のメールフォームではなく一覧で見たい時に割と重宝する。
MW WP Form
Contact Form7の欠点として、デフォルトでは確認画面が出せない点がある(元々確認画面を重要視するのは日本だけらしいです)。
こちらのプラグインは確認画面も対応しているので、状況によってはこちらを使った方が楽な場合もある。
Add Quick Tag
投稿や固定ページの編集を飛躍的に楽にするプラグイン。編集者がHTMLタグを理解していること前提。
投稿画面でもHTMLタグは使えるが、コードヒントは出てきてくれないので中々難儀する。
そんなとき、このプラグインであらかじめタグを設定しておけば、ボタン一つでタグが書き込める。
このブログでも愛用しています。
Duplicate Post
記事を複製できるプラグイン。デフォルトだとなぜかコピー機能が付いていないので、割と重宝する。
似た記事を入れたい時や、開発時にテスト的に投稿を何件か出したい時にとても楽になる。

js的なプラグイン

プラグインの中には、これまでjQueryで設定してきたスライダーやライトボックスが導入できるものもある。
WordPressでしか使えないが、これらを入れると比較的楽に見た目の機能も調整できる。さらにスライダーなどでは、ダッシュボードから画像が選択できるメリットもある。
もちろん、自前でjQueryを入れて動かすことも可能なので、プラグインにない動きでも実現は出来る。

Simple Lightbox
ライトボックスを導入できるプラグイン
Meta Slider
4種類ほどのスライダーが実装できる。カスタマイズも比較的分かりやすい。
Dynamic To Top
上に戻るボタンが簡単に実装できる。とはいえ、これくらいは自前で実装してみたいところ
プロが選ぶ!WordPressプラグインおすすめ50選【2016年版】
選出自体も役立つのですが、下の方にとても良いことが書いてあったので、引用させて頂きました。

WordPressプラグインを活用する際の注意点

WordPressでは日々多種多様なプラグインが公開されています。
機能やスペックは勿論のこと、セキュリティやサポートなども考慮して選ぶ必要があります。プラグインを活用していく上では以下の点に気をつけて選定・使用しましょう。

1.機能性は良いか

同じような機能を持つプラグインは複数あります。言うまでもないことではありますが、その中でも機能性やスペックが優れているもの、自分が必要とする機能が備わっているものを他のプラグインとよく比較して選びましょう。

2.セキュリティの安全性は高いか

中には悪意のあるコードが仕込まれているプラグインも存在します。
できるだけ公式サイトで公開されているものか、多くの開発者に使われているものを利用しましょう。
「脆弱」「不具合」「バグ」などの単語でと組み合わせて検索すると、そのプラグインのセキュリティ面に関する情報が得られる場合もあります。

3.保守性、相互性は良いか

WordPress本体はバージョンアップされていきます。
基本的な構造は変わりませんが、中にはバージョンアップで使用できなくなってしまうプラグインもあります。

そんな時に、プラグインの開発者がサポートを直ぐに行ってくれそうか(過去にも定期的にバージョンアップされていたり、ソーシャルメディアでアクティブかどうか)という点や、バージョンアップでそのプラグインが使用できなくなった場合の影響範囲もリスクとして把握しておきましょう。

4.プラグインは入れすぎず、定期的に削除すること

WordPressのデメリットの一つは、多機能なためサイトが重くなりやすい点です。この問題はエックスサーバーなどスペックが高いサーバーを選ぶことでカバーすることが可能ですが、不要なプラグインは入れないようにしましょう。
また、使用しないプラグインでもセキュリティホールになる可能性があるため、定期的にプラグインを見直して削除するようにしましょう。

5.定期的にバックアップをとること

プラグインの中でも、サーバーの設定に影響するものなど、影響範囲の大きいものもあります。万が一に備え、定期的にバックアップファイルを作るようにしましょう。
先ほどご紹介したBackWPupの他にも、サーバー自体にバックアップサービスがあるエックスサーバーを使ったり、有料のバックアップサービスを使うのも手です。

終わりに

いかがでしたでしょうか。
これからWordPressでサイトを作る方や、すでにサイトをお持ちの方も、ぜひ活用頂ければ幸いです。

特に保守性・入れる数については、よく参考にされると良いと思います。
プラグインダウンロード時に出る「最近の更新」が近ければそれだけでも最近まで対応してくれているという指標になるし、逆に数年更新されていないものは避けるべきです。

また、プラグインを入れ過ぎるとサイトの鈍化や、アップデート時の対応が大変になるので、出来る限り絞る事も重要になる。

2月19日(金) CMS演習④ 講義内容

子テーマによるカスタマイズ

ものにもよるが、テーマは頻繁にアップデートされる(面倒なようですが、むしろアップデートがない=更新されていないということなので、信用度は低いです)。
テーマをカスタマイズする際、直接編集してしまうと、アップデート時に再上書きされてしまい、折角編集したデータが消えてしまう。
その為、カスタマイズ時には元テーマのデータを残したまま編集を行う、子テーマを利用すると良い。
子テーマは、元のテーマをすべて引き継いだ新しいテーマという形になる。

テーマに最低限必要なファイル

WordPressのテーマには、最低限必要なファイルが二つある
これらのファイルは、テーマフォルダの直下(wordpress/wp-content/themes/テーマ/)に置く必要がある。
また、名称は固定。別の名前にすると動かない。

index.php
他のページ(single.phpやpage.php)がなかった時に、自動で読み込まれる基盤となるファイル。
基本的にメインのループ処理が行われ、記事の読み込みを行う。
子テーマの場合は、親から継承するのでなくても問題ない。
後日詳しく講義します。
style.css
ただのCSSかと思いきや、テーマの基礎設定を行う重要ファイル
こればかりは一テーマに必ず一つは必要になる。
基礎設定は、style.cssの一番上で、コメントアウト内に記述する。

/*
Theme Name:テーマの名前
Theme URI:http://●●●.com/
Description:テーマの説明文
Author:制作者名
Version:1.0
*/

上記の様に記述すると、テーマの基礎情報として反映される。
他人に向けて公開するテーマの場合は前項入れた方が良いが、自前で使うだけであれば、必須なのは「Theme Name」だけになる。大文字小文字、半角スペースの有無なども判定されるので注意しよう。
テーマを作る際、一番初めに作成するファイルでもある。

子テーマの設定

子テーマを制作する場合、上記した基礎設定にさらに追加で書き込む必要がある。

/*
Template:親テーマのフォルダ名
Theme Name:テーマの名前
Theme URI:http://●●●.com/
Description:テーマの説明文
Author:制作者名
Version:1.0
*/
@import url("親までのパス/style.css");

Templageは、親に指定したいテーマのフォルダ名。こちらも大文字、小文字、スペースの有無を判定するので注意しておきたい。
これを書くことで、親テーマ内のphpファイルを継承する。
ただしcssはデフォルトでは読み込んでくれない為、「@import url」を使って読み込んであげることが多い。

設定ができたら、「wp_content/themes」フォルダに、新しくフォルダを作って「style.css」の名前で保存する。

既存テーマの改変

子テーマを使って既存テーマを改変する際、いくらか注意点がある。
「@import url」で全てのcssを読み込んだものの下に書くため、直接編集する時とは勝手がいくらか違う。
検証ツールを上手く使って「どこを変えればいのか」を調べた上で記述していくと良い。

style.css以外の編集

子テーマでstyle.css以外のファイル(header.php、content.phpなど)を編集する場合は、親テーマから改変したいファイルを探してそのまま子テーマにコピーする。同じファイル名がある場合、子テーマの物が優先して読まれるので、親を残したまま変更が出来る。全てのファイルをコピーする方法もあるが、編集したファイルだけを移した方が何のファイルを編集したのか分かりやすい。

特殊なファイル、「functions.php」

数あるテンプレートファイルの中で、唯一特殊な挙動をするファイル。全ページに共通でかかる設定などを纏めるファイルだが、これだけは他のファイルの様にそのままコピーするとエラーになる
このファイルは新規で真っ白な同じ名前のファイルを用意し、追加記述を書いていく形をとる。(挙動としては先に子テーマのものを読んでから、親テーマの物を読み込む)
暫く編集する機会はないかもしれないが、覚えておくと良い。

テンプレートタグ

WordPressには、WordPressの中だけで使える関数が数多く用。意されている。
簡単なものだけとりあえず紹介する。大体名前通りの場合が多い。
まだ詳しく抗議していませんが、とりあえずいくつか頻出するものを書いておくので参考までに。

get_header();
header.phpを読み込む設定。他にも「get_footer」「get_sidebar」などがある。
the_title();
記事のタイトルを表示する為のタグ。
the_content();
記事の本文を表示する為のタグ。画像を含めて全文が出てくる
the_excerpt();
記事の抜粋文を指定する為のタグ。画像は表示されない。
the_time();
記事が投稿された日時を指定する為のタグ。
括弧の中はphpのdate関数と同じように、the_time(“Y年m月d日”)と記述できる。また、WordPressでは設定画面で日付の表示設定が出来るので、それを活かす場合は
the_time( get_option( ‘date_format’ ) );
と書いてあげると反映される。
get_template_parts();
他のテンプレートを用意して、読み込む。get_header等と同質だが、header.php等の様に決まった名称ではないファイルを読み込むためのもの。
特に記事の表示部分だけ別のファイルに記述する事が多く、テーマ改変時に頻出するので覚えておくと良い。
get_template_part( ‘template-parts/content’);
と書かれていた場合、「tempate-partsフォルダ内のcontent.php」を読み込んでいる。

WordPressカスタマイズの練習に。シンプルさと使い勝手を追求したテーマ「Simplicity」

個人的によく確認するWeb系情報ブログ、寝ログさんが公開している、シンプルなWordPressテーマがあるので共有します。
Simplicity

見栄え重視の物が多いテーマの中で、「使い手の分かりやすさ」を追求したテーマです。元々シンプル故、自分好みに染めていけます。WordPressの仕組みやちょっと本格的なカスタマイズを学ぶのに最適です。
「とりあえず練習したい!」「ダウンロードしたテーマが複雑すぎてわけわからない」という方は、とりあえず試してみるといいかもしれません。

その上で、実際の使用に耐えられるSEOへの配慮や、SNSの連動補助も完備しているので、十分実用出来るテーマになっています。

※公式からのインストールができないので、上記サイトでダウンロードの後、外観→新規追加→アップロードからzipファイルを選択してアップロードしてください
通常版と2があります。どっちでもいいですが、2の方がWordPressの新仕様に対応していくものと思われます。

php覗いてみたら意外と複雑でした。明日、その辺を踏まえて講義していきます。