FIXER cloud.config Tech Blog

Azure Static Web AppsにWordPressで作成したサイトを配置する

2021年10月12日 11時00分更新

文● 佐藤晴輝／FIXER

　本記事はFIXERが提供する「cloud.config Tech Blog」に掲載された「Azure Static Web Apps に WordPress で作成したサイトを配置する！ #Azureリレー」を再編集したものです。

　2021年5月に正式リリースされたばかりのAzure Static Web Apps（SWA）は無料で商用利用も可能な夢に溢れるサービスです。

　一方で、やはりネックなのはその名の通り静的なサイトしか扱えないということです。

　せっかく個人でも試しやすい料金設定なのに、静的なサイトを一から作るのは大変ですよね。

　そこで今回は、個人でサイトを作りたいと思ったときにお世話になる可能性が高いWordPressで作成したサイトをSWA上に乗っけることを目標にしたいと思います。

前提条件

・GitHubのアカウントを持っている
・Azureのアカウントを持っている
・ウェブフロント系に多少の理解がある or WordPressを扱ったことがある

WordPressとは？

　ブログやウェブサイトを作ることができるオープンソースソフトウェアです。

　PHPで開発されており、一般的にはユーザーがウェブページにアクセスしたときに作成されたページが表示される動的なウェブサイトになります。

　多様なテンプレートやプラグインが存在し、それらを組み合わせるだけでも膨大なカスタマイズが可能なのが特徴です。

WordPressをローカル環境で実行する！

　2021年10月現在でメジャーな方法はXAMPでローカル環境を作成してそこに手動でWordPressを追加する方法と、Local by WPEngineを使って自動でWordPressの追加などを行なう方法の2つがメジャーなようです。

　今回は簡単にやりたいので、後者のLocal by WPEngineを使ってサクッと環境を立てようと思います。

1. Local by WPEngineをインストールして起動する

　公式サイトからダウンロードしてインストールしてください。

　起動すると「アカウントを作れ！」みたいなことを言われますが今回はスルーします。

2. Local by WPEngineを用いてローカル環境にWordPressサイトを作成する

　「CREATE A NEW SITE」から作成してください。

　サイト名、WordPress UserName、WordPress Passwordはお好きなように設定して頂いて構いません。

　必要な部分は後で変えますので、それ以外は全てデフォルトで大丈夫です。

　ここで指定したWordPress UserName等はどこかに登録されるわけではなく、ローカル上に生成されるWordPressサイトの管理画面に入るときに用いるものになります。

3. サイトのURLをローカルホストに変更する

　左上のメニューから「Preferences」を選択して設定画面に移行します。

　「ADVANCED」タブから「Router Mode」を「localhost」に変更し右下の「APPLY」を押します。

　完了したら右上にある緑色の×を押して設定画面を閉じます。

4. PHPのバージョンを変更する

　この後利用するプラグインの都合で、PHPのバージョンを「8.0.0」に変更します。

　初めて変更する場合には事前準備が行なわれますが、勝手にやってくれるので眺めてれば終わります。

WordPressを静的なサイトに変換する！

1. 管理者ページにアクセスする

　「ADMIN」ボタンを押すと、管理者ページにアクセスできます。

　この時、「One-click Admin」で先ほど設定した UserName を指定すると一々ログインする手間が省けます。

　いつものWordPress管理者ページに入ることができます。

2. ポストのパーマリンクを指定する

　この後利用するプラグインのために、表示したいページには.htmlを付ける必要があります。

　パーマリンクの設定から「Custom Structure」を選択し「/%postname%.html」を入力し「Save Changes」を押します。

3. 固定ページのパーマリンクを指定する

　先ほどの設定ではポストのパーマリンクしか変わらないので、固定ページのパーマリンクも変更します。

　使用中のテーマフォルダの中にある「functions.php」に下記コードを追加します。


// 固定ページのURLの拡張子をhtmlに変更する
add_action( 'init', 'mytheme_init' );
if ( ! function_exists( 'mytheme_init' ) ) {
    function mytheme_init() {
        global $wp_rewrite;
        $wp_rewrite->use_trailing_slashes = false;
        $wp_rewrite->page_structure = $wp_rewrite->root . '%pagename%.html';
    }
}

引用：Simply Staticによる静的 HTML 化ではパーマリンク設定が重要である | Naokix.net (naokixtechnology.net)

　自分の環境ではWordPressの管理画面から編集するとエラーが出たので、直接ローカルファイルを開いて編集しました。

4. Simply Staticをインストールして有効化

　今回の主役の一人であるプラグインを追加します。