Windows+IISでWordPress

WordPressも扱う事がなかったので、基本の部分だけ見ておく。
エンタープライズ用途向けにサーバにインストールして使う、という形で想定。
サーバは現在手元で使えるWindowsServer2012だが、コンテナ立ち上げられないのでそのままインストールする。

インストール

日本語訳見ながらインストールする。

大まかな作業は

• ダウンロード
• DBの用意
• Webサーバへの配置

ダウンロード

WordPressをダウンロード
5.8.2だった。解凍しておく。

MySQL

Oracleに取り込まれたのもあってMySQLは殆ど使った事がなくPostgres派だったので、サーバにインストールしていない。これも入手する。
Oracleプロファイル（パスワードを忘れた）が必要なのが面倒。
ダウンロードからMySQL Community Serverを選択して.msiをDLする。
mysql-installer-community-8.0.27.1.msiダブルクリックでdefaultでインストール
パスワード入力以外はそのまま進んでいけば入る。
コマンドラインツールはC:\Program Files\MySQL\MySQL Server 8.0\binにインストールされているのでPathに追加したい場合は追加。
mysql -u root -p
でログインして`select 1 from dual;'
でoracle同様dual表があるのか、と確認してインストールは完了。
詳しい手順はこことか参考

そのままこれ見ながらWordPress用スキーマ的なものを作成。
DB名はwpdb、ユーザはwpadmin、ホスト名はlocalhostにする。
passwordは適当な文字列。

create database wpdb;
create user 'wpadmin'@'localhost' identified by 'password';
grant all on wpdb.* to 'wpadmin'@'localhost';

WebServerへの配置

PHPで動いているようなので、Apacheに配置・・・と思ったが試すためのサーバで動作させているのはIISだったのでこれで動かす。
こことかここ参考にする。

ドキュメントルートの下にwordpressフォルダを作成した。（つまり解凍した中身をそのままコピー）
このままだとPHPも動かないので
Web Platform Installerを使ってPHP for IIS Expressをインストール。
バージョンは7.4.13にした。（というかこれでWordPressもインストール出来そう）

http://localhost/wordpress/にアクセスすると設定画面が開くので「さあ始めましょう」からDB情報を入れる。
ファイルが作成できなかったので手動でwordpressフォルダに作成して、画面表示されたものをコピー。
ユーザ名、タイトル、ユーザ情報などを入れてインストール、で完了
http://localhost/wordpress/wp-admin/から管理画面にアクセス。

もhttp://hostname/wordpressでアクセス出来たが、個別画面に飛んでも記事がない、みたいなエラーが出る。
トップページ以外が404なので、フォルダ権限のセキュリティでオーナーに権限を与えて、
WordPressのパーマネント更新したりして、まずはローカルからの閲覧は可能になった。
他のPCからも見てみると.cssや.jsが全て404になっているが、これはWordPress設定でホスト名をlocalhostにしたせいなのがF12ツールで分かったので
設定からhostnameで設定にしたらOKになった。

別のWeb画面(html)に表示する

実際にはWordPress本体の画面ではなくて、コンテンツだけを他のページに埋め込みたいはず。
RSSフィードからデータ取得する方法がある模様。
https://rfs.jp/sb/javascript/03js/get-rss.html
https://www.will3in.co.jp/frontend-blog/article/eyecatch-in-rss-and-view-another-site/
https://yokochan-y2.com/get-rss-feed/

RSSフィードのアドレスは
http://localhost/wordpress/?feed=rss2
のように?feed=rss2を付けると良いようなので、これを利用してみる。

今回はwebページとwordpressが同一サーバのため、クロスドメインの考慮は必要なし。
jQueryでRSSを取得して分解すれば良いようなので、参考にして以下のように簡単に表示させた。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- IE7モードだと動かない -->

<div id="rss" style="font-size:small; padding-left:10px;"></div>

<script>
$.ajax({
	url: '/wordpress/?feed=rss2', 
	type: 'get',
	dataType: 'xml',
	timeout: 5000,
	success: function(xml, status) {
		if (status === 'success') {
			var row = 0;
			var data = [];
			var nodeName;
			$(xml).find('item').each(function() { // xmlタグを解析
				data[row] = {};
				$(this).children().each(function() {
				    nodeName = $(this)[0].nodeName;
				    data[row][nodeName] = {}; // 初期化
				    attributes = $(this)[0].attributes; 
				    for (var i in attributes) {
						data[row][nodeName][attributes[i].name] = attributes[i].value; // 各属性を配列にセット
				    }
					data[row][nodeName]['text'] = $(this).text();
				});
				row++;
			});
			$('#rss').wrapInner('<ul></ul>');
			for (i in data) { // 取得行数分だけループさせる。
			    $('#rss').find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a>:' + data[i].description.text + '</li>' );
			}
		}
	}  
});
</script>

タイトルと概要が表示された。
アイキャッチの画像を表示する場合はWordPressのRSSに画像URLを埋め込む方法があるようなので、埋め込みテスト。
/wp-includes/feed-rss2.php
をコピーして別名保存、参考に従って以下を追加。
※バージョンアップで消えないように、wp-contentの中とかに入れた方がいいのかも

<guid isPermaLink="false"><?php the_guid(); ?></guid>

<?php /* ここから追加 */
  if ( has_post_thumbnail() ) :
    $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large');
    $thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail');
?>
    <image><?php echo $image_url[0] ; ?></image>
    <thumb><?php echo $thumb_url[0] ; ?></thumb>
<?php endif;
/* ここまで追加 */ ?>

<?php if (get_option('rss_use_excerpt')) : ?>

このphpファイルを使うためにfunctions.phpをrssで検索すると出てくる
function do_feed_rss2( $for_comments )の内容を上記ファイルに変更する。
アイキャッチそのものも有効にする必要があるので、画面から設定して更新。

feedを見ると

<image>http://hostname/wordpress/wp-content/uploads/2021/12/opengion.png</image>
<thumb>http://hostname/wordpress/wp-content/uploads/2021/12/opengion.png</thumb>

が追加されている。
先のJavaScriptを修正すると画像が表示される。

for (i in data) { // 取得行数分だけループさせる。
			    $('#rss').find('ul').append('<li><a href="' + data[i].link.text + '"><img src="'+ data[i].thumb.text + '"/>' + data[i].title.text + '</a>:' + data[i].description.text + '</li>' );
			}

画像がない場合は考慮していないが、テストなので問題ない。

has_post_thumbnailのような関数が
色々あるようなので、WordPressマスターの人はこういうのをある程度把握しているのだろうな、と思いつつマスターにはならないのでおわり。