【WordPress】静的HTMLでまろやかWEB拍手 for WordPressを呼び出す方法

2023年2月27日 01:42

今更これについては書くつもりはなかったんですが、静的サイト+WordPress共存構築前提での小説サイトの運営方法を書くにあたって、ついでだから書いておこうかと思いまして。
共存の詳しいやり方については以下の記事に書いてみました。

1. 準備

まずタイトルの段階で ( ﾟДﾟ)ﾊｧ? と思われた方は、WordPressのみでサイトを構築されている方だと思いますが、こういうやり方もあるんだよ、程度に憶えておいてください。

端的に言うと、WordPressは静的HTML上で動かすことができます。
単純にテンプレート的に組み込むのではなく、WordPress関数を使うことができるのです。
なぜって、よく考えなくてもとどのつまりPHPですから。
ただしデメリットもあります。
余計なCSSやらJavaScriptやらも大量に読み込まれることです。
ですがそのあたりについては条件分岐次第でどうとでもなることなので、ここでは割愛します。

やり方は簡単です。
<!DOCTYPE html> の前で以下のPHPを読み込みます。

<?php require_once ($_SERVER['DOCUMENT_ROOT'] . '/wp/wp-load.php' ); ?>

WordPressを静的サイトを共存させる方法でサイトを構築する方の多くは、前身となる静的サイトを既に持っている方が多いです。
そのため、WordPressを public_html フォルダ内には置かず、インストールフォルダを別途設ける場合が多いです。ここではインストールフォルダを /wp とします。

構成としては以下のような感じです。

public_html / index.html
│             sample.html
├─ assets /
│    ├─ css /
│    ├─ img /
│    └─ js /
├─ wp /* WordPressインストールフォルダ */
└─ cgi-bin /

この、/wp フォルダ内にある wp-load.php を require_once で読み込みます。
準備としては基本、これだけです。
ですが、プラグインに必要なCSSはJSを読み込む必要があります。
テンプレートを共通化している方は、<?php get_header(); ?> でWordPressのヘッダーテンプレート自体を読み込んでしまうのも一つの手です。
<?php get_footer(); ?> でフッターテンプレートの読み込みもできます。

テンプレートを読み込みたくない方は以下の2つを必ず<head>内と、</body>の直前で読み込んでください。

<?php wp_head(); ?>
<?php wp_footer(); ?>

たったこれだけでWordPress関数をHTML上で動かせるようになりました。
つまり、更新情報をわざわざ別にテンプレートを用意してPHPで読み込まなくても、HTML内に直接テンプレート関数を書き込むことができるわけです。

勿論、プラグインによっては上手く動かない場合もあると思います。
フォーム周りについては特にその可能性が高いと思われますが、これにより、静的サイト側の可能性も大きく変わります。

2. まろやかWEB拍手 for WordPressを呼び出す

これも簡単です。
「まろやかWEB拍手 for WordPress」にはそもそもテーマテンプレート上で直接呼び出すためのコードが用意されています。

<?php MWC()->clap_button(); ?>

ですが、上記のコードをそのまま記載しても、正しく機能しません。
多くのWordPress用プラグインは、post_id を利用します。
「まろやかWEB拍手 for WordPress」でもオプションに post_id を直接指定することができますが、そこに静的HTML用の post_id を指定してやらなければいけません。
ですが当然ながら静的HTMLで作られたページには post_id は存在しません。
ないなら作ってやればいいことです。

3. 非公開記事を作る

まず、投稿でも固定ページでもカスタム投稿タイプでも何でもいいです。
非公開の記事を作ります。
そこに「まろやかWEB拍手 for WordPress」を設置したいページのタイトルと同じタイトルをつけます。
作品名なら作品名。
ジャンルならジャンル名。
それを非公開で投稿し、URLに書かれた post_id を下記のように先程のコードに入れてやります。

<?php MWC()->clap_button(true, 'id', 'text', 'color'); ?>

ボタンがきちんと表示されたら、テストしてみましょう。
設置した静的HTMLと同じ非公開記事のタイトルと post_id がきちんと取得できていたら成功です。
やり方によっては、パーマリンクを弄り、静的HTMLのURLとWordPressのURLをまったく同じにするということもできます。
競合はしますが、この場合は非公開記事なので特に問題は起きないはずです。

このやり方は、実際に自分が行っていたやり方でもあります。
なぜこのやり方をしようかと思ったかといえば、既に更新しないページをWordPressで構築することが無駄でしかなかったからです。
今現在はこの方法を取ってはおりませんが、サイト自体は現在を静的サイト+WordPressの共存型で運営しています。

これ以外のWEB拍手関連のカスタマイズ方法は以下の記事で書いていますので、必要な方はそちらも併せて参照していただければ幸いです。

この記事が気に入ったらサポートをしてみませんか？