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マスターの人はこういうのをある程度把握しているのだろうな、と思いつつマスターにはならないのでおわり。