【WordPress】本文中に PHP を利用する方法

WordPress の投稿ページにしろ、固定ページにしろ、直接 PHP を書き込むことは出来ません。不便ですよねーーー。WordPress そのものを作っているプログラミング言語が PHP であるので、PHP をコンテンツに直接書き込むとセキュリティを落とすため、書き込みができなくなっているそうです。

WordPress の本文中に PHP を利用する場合は、ショートコードを作成して利用します。
(プラグインもあるようなのですが、セキュリティ上問題があるようですね。)

ショートコードとは

別個に作ったプロブラムファイルを、本文の中に埋め込むための仕組みです。
WordPress 側ですでに用意されているショートコードもたくさんありますね。
Available shortcodes
これを自分で作るのですが、既存のコードと同じ名前にならないようにしなくてはいけません。
functions.php において、コードとプログラムを関係づけます。

ショートコード作成・利用の流れ

① 組み込みたい内容の PHP ファイルを作成。
② functions.php で、① で作成した PHP ファイルを読み込むための関数を記述。その関数を呼び出すショートコードを作成。
③ WordPress 投稿・固定ページに、②で作成したショートコードを記述。

* functions.php に、投稿・固定ページに書き込みたい PHP のコマンドを、直接記述することもできます。短ければそれでもいいのでしょうが、複数ある、長い、となることを想定して、別の PHP ファイルを作成する前提としました。

それぞれのファイルの関係はこのようになります。

① 組み込みたい内容の PHP ファイルを作成

おなじみ “Hello, World!” という文字列を表示させるプログラムです。
これを投稿ページに埋め込みます。

ex.php

<?php 
echo 'Hello, World!';
?>

このファイルは、子テーマにアップロードします。(子テーマがなければ、テーマの中ですが、子テーマは用意しておいた方がいいです。)

② functions.php で、PHP ファイルを読み込むための関数を記述 + ショートコードを作成

子テーマの中の functions.php に記述します。(子テーマがなければテーマの中の)

functions.php

<?php

// 投稿ページのショートコードで指定された PHP ファイルを読み込む関数
function sc_php($atts = array()) {
  shortcode_atts(array(   /* shortcode_atts でショートコードの属性名を指定 */
    'file' => 'default'   /* 属性名とデフォルトの値 */
  ), $atts);   /* 属性を格納する変数 */
  ob_start();   /* バッファリング */
  include(STYLESHEETPATH . "/$atts[file].php");  /* CSSのあるパス = 子テーマのパスを指定 */
  return ob_get_clean();  /* バッファの内容取得、出力バッファを削除 */
}

// ショートコード作成(sc というショートコードは、sc_php()という関数を呼び出すという意味)
add_shortcode('sc', 'sc_php');
?>

何をやっているのか、一行一行コメントアウトしてみました。(ちょっと鬱陶しいかも 笑)

9行目の include(STYLESHEETPATH . “/$atts[file].php”);
ですが、STYLESHEETPATH は、CSS のあるディレクトリへのパスということです。
CSS は子テーマに入っているので、作成した PHP ファイルも、同じ子テーマに入っているという前提で記述しています。もし、子テーマでなく、別の場所に PHP ファイルがある場合は、そのパスを記述します。

③ WordPress 投稿・固定ページに、ショートコードを記述

PHP を埋め込みたい投稿または固定ページに、ショートコードを記述します。
ショートコードは、[ショートコード名 属性] という形になります。今回は、属性に呼び出したいファイル名を記述します。file という属性は、functions.php で規定しましたね。

[sc file='ex.php']

これでブラウザには、ex.php の中身、
Hello, World!
と表示されます。

【WordPress プラグイン】All-in-One WP Migration

WordPressサイトのサーバー移転って、普通にするとなると、結構、時間も手間もかかるんですよね。FTPで転送して(これが時間掛かります!)・・・データベース動かして・・・.htaccessとかファイル書き替えて・・・内部リンク直して(とても面倒臭い)・・・
私も一度やってみましたが、うんざりしましたよ。

今回、またお引越ししなくちゃいけなくなって、なんか簡単な方法はないかなってプラグイン検索してみたら、サーバー移転&バックアップ機能のあるプラグインって、いくつもあるんですね。「All-in-One WP Migration」を試してみましたが、すごーーーく簡単です!あの手動で移転の大変さが嘘みたいに、スムーズに移転ができました。
簡単 & 速い & 内部リンク自動書き換え と、本当素晴らしいです。

All-in-One WP Migrationでサーバ移転の手順

(前提として、引っ越し先サーバにもWordPressがインストールされている必要があります)
1. All-in-One WP Migration をインストール
2. 引っ越し元からデータ・エクスポート
3. 引っ越し先へデータ・インポート

All-in-One WP Migrationをインストール

引越し元、引っ越し先、両方のWordPress管理画面より、それぞれ、「プラグイン」>「新規追加」で「All-in-One WP Migration」を検索し、インストールします。有効化すると、左の欄に、「All-in-One WP Migration」と表示されます。

引っ越し元からデータ・エクスポート

引越し元のWordPress管理画面より、「All-in-One WP Migration」>「エクスポート」をクリック。

「検索(文字列)置換(別の文字列)データベース内」→ 書き換えたい文字列があれば、ここに入力
「高度なオプション」→ エクスポートしたくないファイルがあれば、ここで選択
「エクスポート先」→ 無料版では「ファイル」しか選べません。使用中のディバイスにダウンロードされます。

緑の枠に囲まれた「~をダウンロード」というのが出てきたら、そこをクリックします。

引っ越し先へデータインポート

引越し先のWordPress管理画面より、「All-in-One WP Migration」>「インポート」をクリック。

「インポート元(先ほどダウンロードしたファイル)」を選んで、「PROCEED」をクリックすれば完了なんですが、ここで、私はちょっと問題がありました。
ダウンロードしたファイルのサイズは28MB。だけど、「最大アップロードファイルサイズ」が、5MBとなっています。どうやらこれは、利用しているサーバの方で、初期設定がそのようになっているらしく、それを変更する必要がありました。

いくつか方法があるようですが、私はその下のところの「最大アップロードファイルサイズをあげる方法」と書かれたリンク先の1番目に書かれていた、「.htaccessファイルをアップデートする」というのをしました。

php_value upload_max_filesize 128M
php_value post_max_size 128M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300

WordPressディレクトリ直下にある.htaccessファイルに、</IfModule>の直前、このように書き込みます。これで、最大アップロードファイルサイズが128MBに広がりました。

「インポート元(先ほどダウンロードしたファイル)」を選んで、「PROCEED」をクリックして完了です!
あっという間にお引越しできました!

【WordPress プラグイン】List Category Posts

WordPressのプラグイン(拡張機能)って、本当に豊富で、こんなのないかな、って検索すると、必ずあるっていうぐらい、何でもありますね。本当に便利です。

投稿記事をカテゴリー毎、タグ毎に、一覧を表示させるプラグイン、ないかな、って思って、検索して見つけた「List Category Posts」。簡単なショートコードで一覧を作れます。

プラグイン有効化後、投稿記事や固定ページに書き込むショートコードをまとめます。

投稿タイトルの一覧表示

新着記事一覧を表示する、一番単純なショートコード。

ショートコード: [catlist]

投稿日を表示

新着記事一覧と投稿日を表示するショートコード。

ショートコード: [catlist date=”yes”]

「date_modified=”yes”」を使うと、投稿日ではなく、更新日が表示されます。

抜粋を表示

新着記事一覧と抜粋を表示するショートコード。

ショートコード: [catlist excerpt=”yes”]

カテゴリーを指定

カテゴリーを指定して、そのカテゴリーの一覧を表示するショートコード。

ショートコード-01: [catlist name=”カテゴリー名”]
ショートコード-02: [catlist id=カテゴリーID]

カテゴリーIDについて⇒ WordPress 記事やカテゴリーのIDの調べ方

タグを指定

タグを指定して、そのタグの一覧を表示するショートコード。

ショートコード-01: [catlist tags=”タグ名”]
ショートコード-02: [catlist id=タグID]

タグIDについて⇒ WordPress 記事やカテゴリーのIDの調べ方

AND指定

複数のカテゴリーまたはタグをAND指定して、その一覧を表示するショートコード。「+(プラス)」を挟み、複数指定できる。

ショートコード: [catlist id=カテゴリーID+カテゴリーID]
例: [catlist id=4+5]

(「+」の前後にスペースを挟まない)

OR指定

複数のカテゴリーまたはタグをOR指定して、その一覧を表示するショートコード。「,(コンマ)」を挟み複数指定できる。

ショートコード: [catlist id=カテゴリーID,カテゴリーID]
例: [catlist id=4,5]

(「,」の前後にスペースを挟まない)

除外指定

あるカテゴリーまたはタグから、別のカテゴリーを除外指定して、その一覧を表示するショートコード。「-(マイナス)」を挟み複数指定できる。

ショートコード: [catlist id=カテゴリーID-カテゴリーID]
例: [catlist id=5-4]

(「-」の前後にスペースを挟まない)

現在のカテゴリーを指定

現在のカテゴリーを指定して、記事の一覧を表示。関連記事として機能として利用。

ショートコード: [catlist categorypage=”yes”]

表示件数指定

記事の一覧に表示される件数を指定します。

ショートコード: [catlist numberposts=記事数]

(記事数は半角数字です)

「numberposts」を指定しない場合、「設定」で指定したページ数になります。
(「設定」>「List Category Posts」>「Number of Posts」に入力されている数字です。)

ページナビゲーションの表示

記事の一覧の下に、ページナビゲーションが表示されます。

ショートコード: [catlist pagination=”yes”]

「pagination」を指定しない場合、「設定」での指定に応じます。
(「設定」>「List Category Posts」>「Pagination」が「true」だと、ページナビゲーションは表示されます。)

アイキャッチ画像の表示

アイキャッチ画像をサムネイルとして、記事の一覧と共に表示。

ショートコード: [catlist thumbnail=”yes”]

アイキャッチ画像のサイズ

アイキャッチ画像のサイズを指定するショートコード。

ショートコード: [catlist thumbnail=”yes” thumbnail_size=”値”]

指定可能な値は以下の通りです。
・ small ⇒ 小サイズ
・ medium ⇒ 中サイズ
・ large ⇒ 大サイズ
・ full ⇒ フルサイズ
・ 任意の幅と高さ ⇒ 数字,数字 (例: thumbnail_size=50,40)

その他、並び順の変更、カスタム投稿の表示、カスタムタクソノミーの表示など、たくさん機能があるみたいですね。とっても使い勝手のいいプラグインです!

【WordPress】記事やカテゴリーのIDの調べ方

WordPressでは、投稿記事、固定ページ、カテゴリー、タグに、それぞれIDが振られています。プラグインを利用する時や、PHPで所定の記事だけを処理したい場合など、このIDを利用することになります。

それぞれのIDの調べ方をまとめます。

投稿記事IDの確認方法


「投稿」>「投稿一覧」で一覧を表示し、IDを知りたい記事にカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「post=番号」の番号の部分が、記事IDとなります。

もしくは、「投稿」>「投稿一覧」>(記事を選び)「編集」で、各記事の編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「post=番号」の番号の部分が、記事IDとなります。

例)https://web.hazu.jp/wp-admin/post.php?post=556&action=edit
記事IDは、「556」となります。

カテゴリーIDの確認方法

「投稿」>「カテゴリー」で一覧を表示し、IDを知りたいカテゴリーにカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「category&tag_ID=番号」の番号が記事IDとなります。

もしくは、「投稿」>「カテゴリー」>「編集」で、各カテゴリーの編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「category&tag_ID=番号」の番号の部分が、記事IDとなります。

例)https://web.hazu.jp/wp-admin/term.php?taxonomy=category&tag_ID=5&post_type=post
カテゴリーIDは、「5」となります。

タグIDの確認方法

「投稿」>「タグ」で一覧を表示し、IDを知りたいタグにカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「post_tag&tag_ID=番号」の番号が、記事IDとなります。

もしくは、「投稿」>「タグ」>「編集」で、各タグの編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「post_tag&tag_ID=番号」の番号の部分が、記事IDとなります。

例)https://web.hazu.jp/wp-admin/term.php?taxonomy=post_tag&tag_ID=9&post_type=post

タグIDは、「9」となります。

固定ページIDの確認方法


「固定ページ」>「固定ページ一覧」で一覧を表示し、IDを知りたい固定ページにカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「post=番号」の番号の部分が、固定ページIDとなります。

もしくは、「投稿」>「固定ページ」>(ページを選び)「編集」で、各固定ページの編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「post=番号」の番号の部分が、固定ページIDとなります。

例)https://web.hazu.jp/wp-admin/post.php?post=51&action=edit
固定ページIDは、「51」となります。

【WordPress】子テーマを作る

WordPressって、割合頻繁にアップデートされるんですよね。テーマもアップデートされるので、テーマ内のファイルを直接カスタマイズしていた場合、書き込んでいたものがすべて消えてしまった!なんて悲しいことになってしまいます。つらいですねー。

そんなことが起こらないように、「WordPressのインストール」→「設定」→「テーマを選らぶ」まで進んだら、まずはカスタマイズ専用の「子テーマ」を作成します。これで、元々のテーマ(親テーマ)がアップデートされても、子テーマはそのままカスタマイズされた状態で残ります。

子テーマ作り手順

1. 最低限必要なファイルを作る( style.css と function.php )
2. 子テーマのディレクトリを作り、ファイルをアップロード
3. WordPress 管理画面より、子テーマを有効化する

手順その1. ファイル作成(style.css と function.php )

このような二つのファイルを作成します。

style.css

/*
 Template:     twentyseventeen
 Theme Name:   twentyseventeen-child
*/

新しいスタイルシート(style.css)を作り、スタイルシートヘッダに、最低限必要な2つの情報を書き込みます。

Template: 親テーマのディレクトリ名
Theme Name: 子テーマ名

親テーマのディレクトリ名ですが、サーバーにあるWordPressファイルの中、「wp-contents > themes」の直下に見つかります。
子テーマ名は任意ですが、親テーマ名に「-child」を付け加えることが推奨されています。

functions.php

<!--?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

新しいfunctions.phpを作り、親テーマと子テーマのスタイルシートをキューに入れる記述をします。4行目で親テーマのstyle.cssを先に読み込み、続いて5行目で子テーマのstyle.cssが読み込まれます。

他に、style.cssに@importを書き込む方法もありますが、こちらの方法が推奨されていますね。実際に私も試してみましたが、反応やや遅めです。

手順その2. 子テーマのディレクトリを作り、ファイルをアップロード

子テーマのディレクトリを作ります。場所は、サーバーにあるWordPressファイルの中、「wp-contents > themes」内。
親テーマと同じ階層に置きます。

作ったディレクトリに、「style.css」と「functions.php」をアップロードします。

手順その3. WordPress 管理画面より、子テーマを有効化


WordPress 管理画面より、「外観」→「テーマ」で、先ほど作った子テーマが反映されているか確認します。

子テーマがあったら、「有効化」をクリック。

これで子テーマの設定は終了です。

親テーマと子テーマの関係

CSSなら、先ほど作ったstyle.cssに、追加したい内容のみ書き込みます。
その他、PHPファイルは、親テーマからダウンロードしたものをカスタマイズし、子テーマへアップロードします。
(PHPファイルは、特に子テーマとの関係を記述するなどの必要はありません)

親テーマの内容と、子テーマの内容は、以下のような関係で反映されます。

CSS: 親テーマの「style.css」に、子テーマの「style.css」を 内容を追加
PHP: 親テーマのPHPファイルに、子テーマのPHPファイルを 上書き
(functions.php のみ例外)

また、子テーマのディレクトリ内に、サイトで利用する画像を入れるためのディレクトリを作っておくとよいでしょう。

【WordPress】CSSのキャッシュを自動リロードさせる方法

はっと気が付いたのですが、CSSって更新しても、キャッシュに残っている場合、スーパーリロードさせないと新しいのが反映されないんですよね。ここもちょこちょことCSS書き足しているのですけれどね・・・。自分だけで見ているのなら、その都度スーパーリロードをかければいいのですが、公開していることを考えるとどうすればいいのか?「皆様、何月何日何時、CSS更新しましたので、キャッシュのリロードお願いします」なんてわけにもいきませんしね。

CSSのキャッシュを自動リロードさせるには、どうすればいいのか?
CSSファイルの更新日時を取得し、それに合わせてリロードするよう、htmlのheadに指示を書き込むことで解決できるみたいです。

やりたいこと

CSS更新時、クライアント側のキャッシュを自動的にリロードさせる

利用する関数

[ PHP関数 ]
filemtime() → ファイルの更新時刻
date() → 日時の取得

[ WordPress関数 ]
bloginfo() → サイト情報を表示
get_stylesheet_directory() → 現在のテーマ、子テーマのスタイルシートのディレクトリパスを取得

手順

1. WordPressの利用中のテーマ、もしくは子テーマ(すでにheader.phpが子テーマの中にあるのなら)から、FTPで header.php をダウンロード
2. header.php に自動リロードの指示を追加
3. 子テーマに header.php をアップロード(子テーマについては後日書きます)

head.php

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<!--?php wp_head(); ?-->

/* ここに↓を追加 */
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>
?ver=<?php echo date('YmdHis', filemtime(get_stylesheet_directory() . '/style.css')); ?>" />

</head>

↑の head.php は、テーマ twenty seventeen のものですが、wp_head() の読み込まれたあとに追加すれば問題ありません。
やっていることは、要するに、更新日をそのままstyle.cssのバージョン名として、新たなstyle.cssとして認識させるということです。キャッシュに残っているのと別のバージョンなら、改めて読み込まれます。

【WordPress】テーマ

WordPressをインストールして設定を行ったら、まず初めにすることは、「テーマ」選びかと思います。
「テーマ」とは、ブログのテンプレートの様に、Webサイトの見た目の決めるデザインのようなものですが、全体の構成や枠組み、それぞれ独自の機能まで含まれています。

最新版(WordPress 5.2)では、「Twenty Nineteen」「Twenty Seventeen」「Twenty Sixteen」の3つがインストールされていますが、「外観」→「テーマ」→「新しいテンプレートを追加」をクリックすると、何千個ものテーマが表示されます。

「Twenty ~」という、開発された年数が名付けられたテーマは、全てWordPressのデフォルトのテーマで、利用者も大変多く、アレンジの仕方、扱い方など、たくさんの人が、サイトなどで、分析、解説していますね。分からない所があっても、ネット検索すると、大概、どなたかのサイトで答えが見つかります。私のこのサイトも「Twenty Seventeen」を利用しています。

その他のすごーくいっぱいあるテーマは、無料のもの、有料のもの、一部有料のもの、ある機能に特化したもの、デザインも様々で、迷ってしまいます。こちらもネット検索すると、オススメや特徴をまとめたWebサイトが多数あるので、そのようなものを参考にするのもよいかもしれません。

テーマを決めたら、カスタマイズを始めるのですが、その前に、テーマ内のファイルの関係をまとめてみました。ざっくりとした私の理解の範囲ですが。

「functions.php」は、テーマの中の王様のような存在です。各phpファイルを関係づけ、全体をまとめます。

それぞれのファイルの変更は、直接上書きするのではなく「子テーマ」を作成し、そこに変更点、追加点を記載していきます。(「子テーマ」については、また別に書きたいと思います)

【WordPress】初心者以前の基本知識

世界で最も利用されているCMSであるWordPress。実際に使ってみたいと思っても、CMSに不慣れだと、そもそも何がどうなっているのか、どこから始めればいいのか、よく分からず、なかなか手が出せないということもあるかと思います。WordPressの使い方に関する書籍も出版されていますし、たくさんの人がウェブサイトで解説もしてくれているのですが、もっと基本の基本の基本、これってどうなっているの?っていう所をまとめてみたいと思います。

WordPressを利用するには、PHP(プログラミング言語)の利用できるウェブサーバーに、

・WordPress本体をインストール
・データベース(mySQLなど)を作る

この二つが前提条件になります。つまり、ウェブサーバーを借りる際、PHP、及びデータベースの使用が可能なサーバーを借りなくてはいけません。

上の図に示した通り、WordPressファイルは、主にページの枠組みを作り、データベースには、主にコンテンツの内容や設定が書き込まれていきます。この二つが組み合わせってウェブサイトを生成しています。


サイトを生成する二つのうちの一つ「WordPressファイル」の中身を覗いてみると・・・

PHPファイルがずらっと並んでいますね。これは全て、ウェブサイトの枠組みを構成するための部品です。WordPressをインストール後、ブラウザ上で操作している限り、これらのPHPファイルに直接手を加えることはありませんが、細かなオリジナルな設定を行う場合、書き換えたり、新たなPHPファイルなどを加えたり、という作業が必要になってきます。

さて、サイトを生成しているもう一方の「データベース」の中身はというと・・・

関連付けたデータベースに、自動的に様々なテーブルが生成されていますね。
例えば、wp_postsには、投稿された記事のテキストが書き込まれ、wp_commentsには、コメント欄に書き込まれた内容が、テーブルに書きつけられています。
データベースも、ブラウザで操作している限り、直接手を加えることはありません。サーバーのお引越しなどをする際は、データベースの内容をエクスポートする必要がありますが。

WordPressを使うにあたって、PHP/CSSの知識がなくても、ブラウザ上での操作だけで、ウェブサイトを構築することはできます。ですが、PHP/CSSの書き換えを行うにしても、1から10まで自分で書かなくてはいけないというわけではないので、必要な時に、一つ一つの要素を学んでいくこともできるので、スキルアップという意味でも、WordPressはとてもいいのではないでしょうか。