Wordpressの出力データのみを静的HTMLページに表示させる方法

Wordpressの出力データをテーマテンプレートを使わずに直接HTMLページに表示させる事ができます。

HTMLページでPHPが使える様に.htaccessに設定する必要があります。

投稿記事の詳細ページもWordpresテーマから独立させて表示する方法をご紹介しています。

Wordpress出力データのみをHTMLページに使いたい

Wordpressは固定ページや投稿を使って様々な情報データを構築する事ができるシステムです。

この時データは、テーマテンプレートに包まれてWEBページとして出力される訳です。

しかし時には「投稿記事の内容だけ」「固定ページの内容だけ」を使いたい事ってありますよね。

管理画面上で入れたデータのみを利用したいのです。

静的HTMLページで使う用途

例えばプレーンの静的なHTMLページがあって、新着情報の部分にだけWordpressを使いたい場合です。

それ以外にも、HTMLページに固定ページの「内容だけ」を表示させ、クライアントで更新ができる様にするケースもあります。

そんな時は正直、テーマのヘッダーやフッターなどは必要ない訳ですね。

本記事ではWordpressの「投稿記事・固定ページの情報のみ」を別の場所（HTMLページ）に出力する方法についてご紹介します。

この時Wordpressは情報を出力するためだけに使い、実際に表示する部分はHTML側が担当する事になります。

パーマリンク設定を「基本」にする

今回紹介する方法では、下準備としてWordpressのパーマリンク設定を「基本」にしておく必要があります。

それを前提に出力コードなどを生成していますのでご注意下さい。

まずはパーマリンクの共通設定が「基本」になっているかどうか確認しましょう。

これによりWordpressから出力されるURLの末尾は全て「?p=○○」の形式になります。

HTMLページでPHPが動作するように設定

次に拡張子が.htmlのファイル上で、PHPが動作するように設定します。

その設定をしないとHTMLページでWordpressデータを出力する事ができません。

.htaccessへのPHP有効設定

PHPを稼働させるなら、.htaccessに設定するのが一番です。

記述の仕方はレンタルサーバーによって異なります。主要サーバーブランドでの設定をご紹介しましょう。

通常の書き方

AddType application/x-httpd-php .php .html .htm

エックスサーバー

AddHandler fcgid-script .htm .html

実際に記述した状態

Lolipop（Heteml）

AddHandler php7.4-script .htm .html

PHPのバージョン（PHP7.4など）は、今利用しているバージョンを確認しましょう。

詳細については、契約サーバーのマニュアルを確認してくださいね。

記事詳細用：独立ファイルの作成

次に投稿記事の詳細データを表示する専用ファイルを準備します。

Wordpressから切り離されたデータの作成

HTMLページ内でPHPが動く様になったのなら、Wordpressのループ処理を直接記述しても良いはずです。

しかしその場合、タイトルをクリックして詳細ページを出すとWordpress側のテンプレートが表示されてしまいます。

本記事ではHTMLページとWordpressシステム部分は独立させる事が前提です。

記事詳細もHTMLページで表示するため、今回はWordpressシステムから切り離した専用ページを準備します。

wp_connect.incファイル

今回は専用ページを「wp_connect.inc」という名前で作成します。

wp_connect.inc内コード

<?php require('cms/wp-blog-header.php'); //オブジェクト独立作業 function object_to_array($obj) { $_arr = is_object($obj) ? get_object_vars($obj) : $obj; foreach ($_arr as $key => $val) { $val = (is_array($val) || is_object($val)) ? object_to_array($val) : $val; $arr[$key] = $val; } return $arr; } //記事取得 $p = $_GET['p']; //記事ID if ($p) { $args['post__in'] = array($p); } $posts = get_posts($args); foreach ($posts as $post) : start_wp(); $date = get_the_date(); $title = get_the_title(); echo '<h3>'; echo $title; echo '</h3>'; echo '<div class="thumbimg">'; the_post_thumbnail('thumbnail'); echo '</div>'; echo '<div class="post-content">'; echo the_content(); echo '</div>'; endforeach;

コードの解説

1行目にはcms/wp-blog-header.phpを読込しています。

ここは、本ファイルを設置した位置からのパスを指定する必要があります。

オブジェクトの配列分解

次のfunction object_to_arrayで、オブジェクトデータ部分だけを独立させる設定をしています。

p=のパラメータを拾う

記事取得の部分は、URL末尾の?p=○○の数値部分を拾う仕組みになっています。

このためにパーマリンクの共通設定を、「基本」に設定した訳ですね。

その後の記述は記事出力のループ処理です。

foreach内に表示しているhtmlタグは、HTMLページ内に合わせて変更しましょう。

独立ファイル用テンプレート作成

次に記事の詳細を表示する際のレイアウト部分を担うファイルを作成します。

今回は名前を「wp_info.php」としています。

wp_info.phpファイル

このwp_info.phpもWordpressから切り離した独立ファイルです。

phpファイルではありますが、他のHTMLページと同様に構築しましょう。

その上で記事のコンテンツを表示したい部分に以下を記述します。

wp_info.php内出力コード

…HTMLソース <?php include('wp_connect.inc'); ?> …HTMLソース

ここで先程作ったwp_connect.incファイルを呼び出しています。

2つのファイルは同じ位置にアップするので、パスなどは考慮せずそのままファイル名を書くだけです。

作成した2つのファイルについて

2つのファイルの役割はそれぞれ以下の通りです。

この2つのファイルによりWordpressからデータこそ抜き取りますが、テーマテンプレートには全く触らずに稼働します。

wp_connect.incではWordpressのデータのみが出力され、テーマ出力はされません。

テーマ出力がされない以上、レイアウト部分のHTMLソースをwp_info.phpで別途準備する必要がある訳ですね。

アップロードする場所

以上2つのファイルをサーバーにアップします。

本記事では、TOP配下のcms/内にWordpressシステムがある事を想定しています。

ですので、アップロードする先はTOPディレクトリにしましょう。

TOPの位置からcms/の中を読込に行くようにします。

名前は自由に変更可能

wp_connect.incとwp_info.phpのファイル名自体は自由です。

ファイル名を変更した場合は、下で紹介する記事一覧のループ処理に出てくるファイルの名前も変更しましょう。

HTMLページへWordpressの関数を埋め込む

先ほど.htaccessを使ってHTMLページ内でPHPコードを実行できるようにしましたよね。

ですのでHTMLページ内でWordpressの関数が使えるようにします。

最上部へのphpコード追加

HTMLファイルの最上部に、以下を追加してください。

TOPディレクトリにHTMLファイルがある場合

<?php require('cms/wp-blog-header.php'); ?> <!DOCTYPE>

このコードを上記の様に、htmlソース最上部の<!DOCTYPE>の上に入れましょう。

これでこのHTMLページ内でWordpressの関数が使えるようになります。

上記パスはcms/wp-blog-header.phpですが、これはもちろんHTMLファイルのある場所によって変わります。

HTML内で記事一覧を表示する

ではいよいよHTMLページの任意の位置に、以下の様にループ処理を記述して記事一覧を表示していきます。

HTML内記事出力コード

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array( 'paged' => $paged, 'posts_per_page' => 10, ); $wp_query_post = new WP_Query($args); ?> <?php if ($wp_query_post->have_posts()): ?> <?php while($wp_query_post->have_posts()): $wp_query_post->the_post(); ?> <div class="recent-list"> <h3><?php echo date("Y年m月d日", strtotime($post->post_date)); ?><br><a href="<?php $pno=get_the_ID(); echo 'wp_info.php?p='.$pno; ?>"><?php if(mb_strlen($post->post_title)>25) { $title= mb_substr($post->post_title,0,25) ; echo esc_html($title). … ;} else {echo esc_html($post->post_title);}?></a></h3><?php echo apply_filters('the_content', $post->post_content); ?> </div> <?php endwhile; ?> <?php else: ?> <div class="recent-list"> <p>記事がありません</p> </div> <?php endif; wp_reset_postdata(); ?>

これでHTMLページの任意の位置にWordpressの投稿記事が表示されていると思います。

本サンプルの注意点

サンプルでは本文も表示される

サンプルでは念のため「本文」まで表示されるようなコードにしています。

本来は「本文」は出さず、タイトルをクリックして詳細ページへ飛んでもらうのが良いと思います。

仮に「本文」が短く済むのであれば、サンプル通り全て出してしまっても良いと思います。

そのページで新着情報の表示は済んでしまいますので、タイトルリンクは消してしまって良いと思います。

パーマリンクの箇所について

タイトル部分のaリンクには以下のコードが入っています。

<a href="<?php $pno=get_the_ID(); echo 'wp_info.php?p='.$pno; ?>">…</a>

ここは取得した記事idをパラメータとして付与し、先ほど作成したwp_info.phpファイルを呼び出しています。

この時のURLは、http://ドメイン名/wp_info.php?p=○○となり、Wordpressから独立したアドレスになります。

wp_info.phpはTOPディレクトリにあるので、HTMLページのある位置から適切なパスを入れましょう。

これによりタイトルリンクをクリックした際、対象idの記事詳細がwp_info.php内で表示されるという訳ですね。

HTML内で固定ページの内容を表示する

投稿記事以外に固定ページの内容を表示する事もできます。

むしろ固定ページの表示の方が簡単です。

最上部へのphpコード追加

まずは先ほど同様HTMLファイルの先頭に、wp-blog-header.phpを追記します。

<?php require('cms/wp-blog-header.php'); ?> <!DOCTYPE>

Wordpressの関数を読み込めるようにするのは、これまでと同じです。

固定ページ表示コード

その上で表示させたい位置に以下のコードを設置します。

<?php $page_id = 12; $content = get_page($page_id); echo '<h2 class="title">' . $content->post_title . '</h2>'; echo $content->post_content; ?>

2行目の$page_id = 12;の部分で、固定ページを作った時に生成された記事IDを指定しています。

編集ページ上のURLで、固定ページのIDを知る事ができます。

固定ページの情報を丸ごと表示

上記の場合、固定ページ内で記述されている情報を丸ごと（タグごと）掲載します。

固定ページの内容を表示する場合は、さっき準備した2つのファイルwp_connect.incやwp_info.phpは使いません。

投稿記事の様に、クリックして詳細を見る様なアクションの必要がないためですね。

$content->post_content;について

上記の$content->post_content;は、固定ページ上の整形前の生データを丸ごと抜き出します。

固定ページのデータなので、タグなども丸ごと必要なためですね。

ですが投稿記事で、$content->post_content;でタグごと表示するのはお勧めできません。

それには3つの理由があります。

$content->post_content;を使わない方が良い理由

固定ページはともかく、投稿記事で本文を抜き出すのなら下記のように変更するのが良いでしょう。

<?php echo strip_tags(apply_filters('the_content', $content->post_content)); ?>

この様にする事で、整形された本文を抜き出せるようになります。

一押し人気コーナー紹介