【WordPress】静的サイト+WordPressで小説サイトを構築する④
4回目です。
今回はWordPressから実際に静的HTMLに表示する方法や、エディタ周りのこと、あとプラグインについて少しだけ書いていきたいと思います。
前回までの内容は以下の記事を御覧ください。
1. 更新情報を静的HTMLにWordPressで表示する
既に1回目の 3.静的HTMLからWordPressを呼び出す でも少し触れましたが、更新情報をWordPressで投稿して、静的HTMLに呼び出す具体的なやり方と運用方法についてになります。
1-1. 前準備
まずはおさらいです。
静的HTMLの<!DOCTYPE html> 宣言の前でWordPressを呼び出します。
<?php require_once ($_SERVER['DOCUMENT_ROOT'] . '/wp/wp-load.php' ); ?>テンプレートの共通化もjQueryもプラグインも使わないのであれば、WordPress関数自体はこれだけでも使えます。
プラグイン等も使用する方は、必ず<?php wp_head(); ?> と <?php wp_footer(); ?> も読み込んでください。
テンプレートの共通化は<?php get_header(); ?> と <?php get_footer(); ?> などのテンプレートタグで大丈夫です。
1-2. WordPress側の運用方法
WordPressで更新情報を管理するには、2つの方法があります。
投稿でカテゴリーを分ける。
専用のカスタム投稿タイプを設定する。
これはブログ機能に関しても同じことです。
更新情報とブログ機能、両方をWordPressに委ねる場合は上記のどちらかの方法を取ります。
どちらであっても専用のアーカイブテンプレートを作ることに変わりはありませんし、どちらでもあってもWordPressのデフォルト機能としてRSSを吐き出すことも可能です。
archive-news.php
archive-blog.php
single-news.php
single-blog.php
RSSはカテゴリー別に吐き出す場合は以下のようになります。
https://example.com/category/news/feed/
/category/ を削除している場合はURLに気をつけてください。
またカスタム投稿タイプ別のRSSは以下の用にslugの後ろに /feed/ をつけます。
https://example.com/portfolio/feed/
投稿する記事内容にもよりますが、手間で考えるのであれば投稿でカテゴリー分けをしたほうが早いと思われます。
もし、それぞれ個別記事のテンプレートは別にしたいという場合はカスタム投稿タイプを使うことになります。
投稿でのカテゴリー分けは以下のようにします。
blog
子カテゴリー1
子カテゴリー2
子カテゴリー3
news / record / information
未分類
更新情報用カテゴリーのslugは news でも record でも information でも何でもいいですが、あまり階層を作るなどして複雑化しないほうがいいと考えています。
もしカテゴリー分けした更新情報を更に分類したい場合は、タグで管理し、ブログのタグクラウドには除外表示のためにidを設定します。
そのへんをごちゃごちゃ考えたくないという場合には、はじめからカスタム投稿タイプで分けてしまったほうが無難かもしれません。
自分は現状、投稿でカテゴリー分け運用を行っているのですが、更新情報の場合は投稿タイトルにわかりやすく [更新] などの分類をつけています。
更新情報には詳細を持たせず、一覧を表示するだけなので、タイトルを表に出すことはありません。
1-3. 静的HTMLに更新情報を表示する
静的HTMLで更新情報を表示するには、サブループを使っていきます。
<!-- record start -->
<?php
$args = array(
'post_type' => 'post', // 投稿タイプを指定
'category_name' => 'news', // カテゴリーを指定
'posts_per_page' => 5, // 表示するページ数
'post_status' => 'publish',
);
$wp_query = new WP_Query( $args );
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<dl>
<dt><?php the_date(); ?></dt>
<dd><?php the_content(); ?></dd>
</dl>
<?php endwhile; endif; wp_reset_postdata(); ?>
<!-- record end -->これだけです。
WP_Query に変数で投稿タイプ、カテゴリー、表示件数、ステータスを指定します。
サブループは最後に必ず <?php wp_reset_postdata(); ?> で閉じてください。
1-4. 一覧ページを作る
これも簡単です。category-{slug}.phpを作って、中に同じように書いていきます。
WordPress側で設定した表示件数を変更する必要性がなければメインループを使用して大丈夫です。
表示件数を変えたい場合は静的HTML同様、サブループを使用します。
1-5.個別記事へのアクセスをリダイレクトさせる
これはRSSなどの配信する際、更新情報の個別記事を見せたくないという場合に設定します。
個別記事へのアクセスがあった場合はホームURLにリダイレクトするように、functions.php に以下のように記述します。
function redirect_category() {
if ( is_singular('post') && has_category('カテゴリー') ) {
wp_redirect( home_url() );
exit;
}
}
add_action( 'template_redirect', 'redirect_category' );個別記事が特定のカテゴリーに属しているかどうかを判断してリダイレクトします。
上記のコードは投稿でカテゴリーを使用した場合のものです。
カスタム投稿タイプは同じく is_singular() で投稿タイプを指定して判定します。
function redirect_custom_post_type() {
if ( is_singular('投稿タイプ') ) {
wp_redirect( home_url() );
exit;
}
}
add_action( 'template_redirect', 'redirect_custom_post_type' );このような感じで、更新情報をWordPressで管理し、静的HTMLで表示するのは比較的簡単にできます。
どちらかというと、ブログ用のテンプレートを作るほうが手間かもしれません。
2. 自動整形を止める
WordPressの自動整形が嫌う方は結構いると思います。
Gutenberg や Classic Editor でMarkdown記法を使うには、この機能を停止させると残念ながら改行ができないのが悲しいところです。
でもうざいので止めます。
// 特殊文字の自動変換無効化
add_filter( 'run_wptexturize', '__return_false' );
//自動整形を無効
remove_filter('the_content', 'wpautop'); // 本文欄
remove_filter('the_excerpt', 'wpautop'); // 抜粋欄なお、特定の投稿タイプだけ無効化することもできます。
//自動整形を無効
add_filter('the_content', 'wpautop_filter', 9);
function wpautop_filter($content) {
global $post;
$remove_filter = false;
//自動整形を無効にする投稿タイプを記述
$arr_types = array('post, 'page', 'カスタム投稿タイプ');
$post_type = get_post_type( $post->ID );
if (in_array($post_type, $arr_types)){
$remove_filter = true;
}
if ( $remove_filter ) {
remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');
}
return $content;
}更にこういうこともやりました。
3. テキストエディタにカスタムボタンを追加する
これも有名な方法なのですが、併せてご紹介します。
テキストエディタに任意のボタンを追加する方法です。
add_action('admin_print_footer_scripts', function () {
// QTags.addButton('①ボタンのhtmlのid', 'エディタのボタンに表示する名前', '開始タグ', '終了タグ', '', 'ボタンの説明', ボタン表示順);
if (wp_script_is('quicktags')){ ?>
<script type="text/javascript">
QTags.addButton('button-1', 'p', '<p>', '</p>\n', '', '段落', 1);
QTags.addButton('button-2', 'br', '', '<br>\n', '', '改行', 2);
QTags.addButton('button-2', 'cite', '<cite>', '</cite>', '', '引用', 3);
QTags.addButton('button-3', 'div', '<div class=\"sample\">', '</div>\n', '', 'ブロック', 4);
</script>
<?php
}
},100);<br> についてはテキストを選択した状態で押すか、挿入したい場所で2回連続押してください。
<ruby>タグなどもセットしておくとより便利です。
WordPress6以降でクイックタグが表示されなくなった方は、最後に優先度100を追加してみてください。
classを使う場合はダブルクオーテーションの前でエスケープします。
また、改行コード \n も使用できます。
クイックタグAPIについての詳しいパラメータは以下を確認してください。
クイックタグAPI - WordPress Codex 日本語版
4. メールフォームを設置する
これについてはそんなに選択肢はありません。
プラグインとして Contact Form 7 、MW WP Form を使用するか、あるいは外部ツールとして Google Forms を導入するか、WordPressに依存しないメールフォームプログラムを設置するか、です。
プラグインの具体的な設置方法などは省きますが、2つのプラグインについての違いだけ説明しようと思います。
Contact Form 7とMW WP Formの最大の違いは、送信後に画面変遷するかしないかだと思います。
更に、Contact Form 7は拡張プラグインによって条件分岐やデータベース機能、CSVエクスポート機能を提供しますが、MW WP Formはデフォルトでこれらの機能を有しています。
フックを使用するので、人によってはこちらのほうが敷居が高いと感じる方もいらっしゃるかもしれません。
しかし、余計なプラグインを導入する必要がないというのは、WordPress環境ではかなり大きな差異です。
例えば、送信の必要性がない表示/非表示のためだけのチェックボックスの実装にプラグインは必要ありません。
これはContact Form 7であっても同じであると考えるべきです。
フォームの開閉などという意味のないデータは送るべきではないと、個人的には考えています。
ではどうやって切り替えるのか。
普通にHTML+CSS、あるいはJavaScriptで充分なはずです。
現在、ただデータを送信する必要のない、ただのスイッチとしてチェックボックスの切り替えをプラグインで制御している方は設計を見直してみてください。
更に、MW WP Formはフォームごとにグラフを表示することも可能です。
より痒いところに手が届くのがMW WP Form、という感じでしょうか。
お手軽に確認画面のあるメールフォームを設置したいのであれば、MW WP Formをお勧めします。
では創作サイトでなぜContact Form 7が有名なのかといいえば、WEB拍手の代替として設置する人が多いからだと思われます。
有名なのはりうさまの書かれたこちらの記事でしょうか。
自分の知る限りでは最初にこの方法が考えられたのは2020年よりもだいぶ以前で、りうさまとは逆に、リダイレクト機能で画面変遷させてお礼ページを表示できることを利用できるのではないか、と考えた方がいらっしゃいました。
画面変遷をするのであれば、別にMW WP Formでもいいのではないかとも思うので、そのあたりは好みでしょうか。
個別作品ページに置くのであれば、画面変遷しないというのはメリットになります。
ですが、MW WP Formも同一URLにし、設定にある「画面変遷時のスクロールを有効にする」をチェックすれば完了画面までスクロールさせることができるので、よりWEB拍手に近いものをお求めの方は、こちらを考えてみてはいかがでしょうか。
MW WP Formも日本人の方が作られたプラグインなので、非常にオススメです。
5. Contact Form 7をWEB拍手として使う
ついでなので、これについて少しだけ個人的な改良点を書いておきたいと思います。
5-1. type="hidden"を使う
りうさまはボタンだけを押したときの挙動として、非表示でチェック入りのラジオボタンを設置されていました。
[radio radio-■■■ class:webclapform_none use_label_element default:1 "WEB拍手"]ですがContact Form 7はtype="hidden"が使えますので、こちらを使用します。
[hidden Like "いいね！"]また、併せてデフォルトの機能を使い、設置したページのタイトルとURLも取得します。
※2023/03/12追記と修正を行いました。
また、拡張機能として併せて Contact Form 7 – Dynamic Text Extension を導入します。
これは Contact Form 7 のテキスト欄や隠しフォームにGET、POSTなどからのデータ取得機能を追加したり、フィールドへ出力させたりするためのプラグインです。
これを挟まないと後述するデータベースプラグインでの出力ができなかったため、導入しました。
[dynamichidden title "CF7_get_post_var key='title'"]
[dynamichidden URL "CF7_URL"]これらをメールに含める場合は、メッセージ本文で以下のように書くだけでOKです。
[Like]
[title]
[URL]これにより、フォームが送信された作品タイトルを把握できるようになります。
また、wpcf7_form_tag を利用しても独自のフォームを追加することは可能です。検索すると真っ先に上がってくるのがパラメーターを付与するやり方だと思うのですが、おそらく get_the_title() 等を直接渡してやるやり方もあると思いますので、探してみてください。
というか蛇足程度にやりましたのでご査収ください。
単純にメールに残れば十分な場合は、デフォルトで用意されている 特殊なメールタグ を使用します。
[_post_title]
[_post_url]あとこれも蛇足なのですが、Contact Form 7 でフォームの作りがわかりにくいという方は、フォームを追加する際の識別子をそのまま使わずに、name属性を任意のものに置き換えてみてください。
それにより可読性も管理のしやすさもぐっと上がるはずです。
5-2. Flamingoの代わりにContact Form CFDB7
拍手の回数を把握したい方向けに、Flamingoの代わりにContact Form CFDB7をお勧めします。
こちらのプラグインはMW WP Form同様、データベース機能にてフォームの送信回数を表示することができます。
極端な話、ページごとに専用のフォームを複製して使えば、ページごとの集計もできるわけです。
その場合、フォーム名には作品タイトルを入れます。
あまり数が多いと色々と弊害も出ると思われますので、せめてジャンル単位などに収めておくほうがいいかもしれません。
作品タイトルは前述の [dynamichidden title "CF7_get_post_var key='title'"] で取得してください。
5-3. Google Analyticsと連携する
送信回数を計測する方法はもう一つあります。
こちらは自分がGoogle Analyticsを使っていないため、理論だけのご紹介になりますが、Contact Form 7ではデフォルトでGoogle Analyticsにイベントを送信するためのカスタムDOMイベントが提供されています。
これによりコンバージョンを測定することで、拍手の回数を計測できるのではないか、と愚考します。
詳しくは検索してみてください。
5-4. カスタムフィールドを利用して送信回数を記録する
これについては少し違う形でいずれ実装実験をしようと思っているのですが、理論でいけば、カスタムフィールドを利用して所謂WEB拍手、いいねボタンを作ることができます。
Ajax通信の利用が前提の話になりますが、データを格納するためのカスタムフィールドを作り、Contact Form 7で実装した送信ボタンが押される度にカウントアップ・カウントダウンするという方法があります。
詳しくはこちらの記事を参照してみてください。
実際、WordPressの中にはカスタムフィールドに回数を記録するいいねボタンを実装するプラグインもあります。
自分の環境ではアイコンフォントの競合の問題などがあったので、そのプラグイン自体は使えなかったのですが……。
カスタムフィールドやdoさまの いいねボタン・改 などにカウントを任せ、フォーム部分だけをContact Form 7で運用するようにすれば、いいねの度にメッセージを含まないメールが届くことは減らせると思います。
また、デフォルトでフォームを隠すこと自体は同じくdoさまで配布されている コイブミ にJavaScriptやチェックボックスとCSSを併せることでも実装できると思いますので、よりWEB拍手っぽくしたい方は試してみてください。
なお、まろやかWEB拍手 for WordPress のデータを捨てたくない、今のまま使いたいという方は、PHP8への対応方法も書いておりますので、そちらをご参照ください。
また、データをサルベージしたい方は別途エクスポートが可能なプラグインを導入すれば、まろやかWEB拍手 for WordPress のデータをCSVで吐き出させることも可能なはずです。
6. MW WP FormをWEB拍手として使う
MW WP FormをWEB拍手の代替として使うのは非常に簡単です。
Contact Form 7では拡張プラグインを必要とする機能がほぼ、デフォルトで提供されているからです。
また、フィルターフック、アクションフックも豊富なので、望む機能はほぼ得られると思われます。
以下に最も簡単な疑似拍手のコードを置いておきます。
[mwform_hidden name="Like" value="いいね"]
[mwform_hidden name="clap_page"]
[mwform_submit name="submit" class="submit" value="いいね"]MW WP Formは送信後、フォームを閉じるため、所謂、連続拍手はできません。
代わりにフォーム管理画面にて自由に送信完了画面を作ることができます。
事実上の画面変遷を伴わない同一URLでの運用は、フォーム管理画面で各URLの欄を空のまま運用します。
また、設定にある以下の項目にはチェックを入れておきます。
問い合わせデータをデータベースに保存
画面変遷時のスクロールを有効にする
「URL引数を有効にする」にチェックを入れると、URLにパラメータをつけることによりpost_idを引っ張り、設置ページにあるIDからタイトルからカスタムフィールドまで、様々なデータを引っ張ることができます。
ただし、そのためには設置ページへのリンクにパラメータを付与しなければなりません。
<a href="<?php echo home_url( '/' ); ?>sample/?post_id=<?php echo $post->ID ?>">サンプル</a>これはちょっと面倒なので、functions.php に以下のように追加します。
function my_mwform_value( $value, $name ){
if( $name === 'clap_page' ){
$name_value = get_the_title();
return $name_value;
}
return $value;
}
add_filter( 'mwform_value_mw-wp-form-xxx', 'my_mwform_value', 10, 2 );上のコードはページタイトルを取得するための例です。
mwform_value_mw-wp-form-xxx の xxx の部分はフォーム識別子（フォームID）を入力します。
その上でフォームに以下のようなショートコードを記述します。
[mwform_hidden name="clap_page"]これが最初のコードの2行目になります。
その上で問い合わせデータでグラフを表示すると、ページタイトルといいねの数が分析データとして表示されます。
個人的にはContact Form 7を使うよりも遥かに望んだWEB拍手に近いものを作れると思います。
更に、フォーム部品自体は非常にプレーンなものが生成されるため、CSSによるカスタマイズも非常にしやすいです。
よかったら一考してみてください。詳しいサンプルと実装方法については後日、詳細を記事にしたいと思います。
書きました。詳細版です。
以上です。
「静的サイト+WordPressで小説サイトを構築する」とは銘打ちましたが、基本的には自分が運用しているなかで少しでも参考程度になればな、と書いてみました。
一応、今回でこの連載もどきは終わりになります。
ここまでお付き合いいただき有難うございました。
また何か思いついたら別途、書いていこうと思います。
コメント
7大変参考になりました！！
気になったのですが、
>また、併せてデフォルトの機能を使い、設置したページのタイトルとURLも取得します。
>[dynamichidden title "CF7_get_post_var key='title'"]
>[dynamichidden URL "CF7_URL"]
この箇所は、デフォルトではなくContact Form 7 Dynamic Text Extensionを使用した時のものでしょうか。
デフォルトですと、https://contactform7.com/ja/special-mail-tags/を見る限り[_url]（もしくは[_post_url]）と[_post_title]かなと思いました。
もし勘違いしていたら申し訳ありません。
> メモさま
大変失礼しました。ご指摘ありがとうございます。
自分でも設定したのが些か前だったので失念していましたが、こちらは確かに「Contact Form 7 – Dynamic Text Extension」を拡張しての記述になります。
該当部分を修正しましたのでご確認ください。
DB出力には通常の特殊メールタグだけでは記録されず、フォームを生成する必要があったため「Contact Form 7 – Dynamic Text Extension」を使用しております。
一応、自分では未検証にはなるため詳細を語れず申し訳ないのですが、functions.phpにwpcf7_form_tagを利用して隠し要素でタイトルとURLを直接渡してあげても、多分可能だと思われます。
https://contactform7.com/ja/2020/02/28/adding-a-custom-form-tag/
重ね重ねありがとうございました！
未花月葉様
詳しくありがとうございます。
拍手自体の数値は別の方法で取得しておりContact Form7は簡易コメントフォームとしてのみ使用していたため、DBに保存されないことを知りませんでした。ありがとうございます。
> メモさま
こちらこそ、ありがとうございました。
補足すると、厳密にはFlamingoの場合は特殊メールタグだけで取得することが可能です。
あちらは公式御本人さまの作られたものなので。
ですが、それ以外のDB保存プラグインの場合はフォームの内容しか取得しません。なので隠し要素として別途取得するのは、他のプラグインを併用することが前提になります。
そもそもがFlamingoの顧客管理機能が、登録ユーザーの情報まで拾ってくるのがきっかけで考えた乗り換えでしたので。
参考程度にでもなれば幸いです。