2023
11/13
wordpress化の方法を1から説明。静的サイトにwordpressを導入する方法。
wordpress化の方法を1から説明。
せんせー！wordpress化が複雑すぎてわからない！！
さくや
せんせい
そうだね。wordpress化はhtmlとは違い複雑なコードを扱うことになるから最初はwordpress化するだけでもかなり大変だよね。
そうなの！wordpress化を1から全部教えてくれる神のような人いないかなー！！
さくや
せんせい
わかったよ。今から１から全部説明するからwordpress化を完璧にしようね
やったー！！さすがうちのせんせー！！
さくや
wordpress化とは？？
まずは「wordpress化とは何か」という話です。wordpress化とは、htmlやcssなどを使って制作したサイト（静的なサイト）をコードを触らずとも更新できるようにする（動的なサイトにする）作業のことです。
wordpress化をすると記事の更新ができたり、他にも色々便利にサイトを運営することができるので基本的にサイトをウェブ上にアップロードする際はwordpress化は必須になります。
「wordpress化すると何ができるか」は以下の記事で詳しく説明しているのでぜひこちらもご覧ください
wordpress化のステップ
では、実際にwordpress化をしていきましょう。
念の為、静的サイトのデータを複製してwordpress化をすることをおすすめします。（消えることはほぼほぼないですが色々いじった後で元に戻すのが面倒くさいので）
ステップ1_Localサイト立ち上げ
今回静的なサイトをwordpress化するということで、「まだサイトをサーバーにアップしていない人」と「もうすでにサーバーにアップしている人」がいるかと思います。（おそらく前者が大半だと思いますが）ですが、どちらの方も一度Localでwordpress化した方がいいと思うので同じやり方で問題ありません。
まず「Local」をインストールしていない場合はインストールする必要があります。「Local」は今後のサイト制作でも絶対に使うのでインストールすることを強くおすすめします。
すでにインストールしている方は次のステップへ
1,「DOWNLOAD FOR FREE」を押す
Localの公式サイトに飛ぶとこんな画面になっているので「DOWNLOAD FOR FREE」というところを押してください。
2,「Please choose your platform」を押す
その後、このような画面が出るので「Please choose your platform」を押してください。
3,「DOWNLOAD FOR FREE」を押す
Localの公式サイトに飛ぶとこんな画面になっているので「DOWNLOAD FOR FREE」というところを押してください。
4,メールアドレスを入力する
メールアドレスを入力します。その上の用途の項目も何かしらを選択しないとダウンロードに進めないので適当に選択して問題ないです。
5,ダウンロード完了
このような画面が表示されダウンロードが始まればOKです！
その後インストールされたLocalを起動してアカウントを作成すれば準備は完了です。
6,新規Localサイト作成
インストールしたLocalを立ち上げるとこのような画面になっています。赤いところにはこれまで作成したLocalサイトが保管されています。インストールしたばかりの状態では何も表示されていません。
まずは、左下の＋ボタンを押してください。
次はこのような画面になるので左の「Creat a new site」を押してください。
次はLocalサイトの名前を入力してください。こちらは後で変更可能ですが少し面倒くさいので基本変更しないことをおすすめします。
次はLocalサイトの名前を入力してください。こちらは後で変更可能ですが少し面倒くさいので基本変更しないことをおすすめします。
次はwordpressにログインする際に必要になる「ユーザー名」「パスワード」登録します。メールアドレスはデフォルトのままでも問題ありません。
注意
- ユーザー名とパスワードは管理画面にログインする際に使用するのでメモしておこう
これでLocalサイトが立ち上がりました。ここにwordpressのサイトを作っていくことになります。
7,Localサイト確認
一応Localサイトが問題なく立ち上がっているか確認したいと思います。
右上にある「WP Admin」のボタンを押すと管理画面に飛びます。「Open site」を押すと実際に表示されているLocalサイトに飛びます。管理画面を確認したいので「WP Admin」を押してください。
そうすると管理画面へログインするためのログイン情報を要求されます。なので⑤で登録した「ユーザー名」「パスワード」を入力してください
この画面が表示されたらLocalサイトの立ち上げが完了です。
お疲れ様です。準備ができたので次に本格的に静的サイトを動的なサイトにしていきます。休憩を交えながら頑張りましょう。
ステップ2_フォルダの移動
Localサイトのディレクトリへ静的サイトのコンテンツを移動
Localサイトを立ち上げたばかりの状態ではwordpress側で元から用意されているテーマが適応されています。なのでこれをオリジナルのテーマ（事前に制作したサイト）に切り替える必要があります。そのためにまずフォルダをLocalサイトの指定の場所に移動します。
まずFinder内にあるホームに飛びます。（mac）
ホーム（macの設定によって名前が異なる）から「Local Sites」へ。さらに「Local Sites」内から先ほど立ち上げたサイト名を探す
作成したLocalサイト名（画像の「getfreewp」）の「app」フォルダ内の「public」フォルダへ
「public」フォルダ内の「wp-content」フォルダ内の「themes」フォルダへ
「themes」フォルダ内には画像のように「index.php」と「twentytwenty~」のフォルダが存在します。この「twentytenty~」フォルダが現在表示されているサイトの外観（テーマ）になります。
ここに自分で制作した静的サイトのフォルダをアップロードします。
これで準備は完了です。ここから本格的にコードの書き換えなどを行いながらwordpress化していきます。
ステップ3_各ファイルのコード書き換え
wordpress化するためにはいくつかのファイルをwordpressに対応できるように書き換え、または作成する必要があります。書き換えが必須のファイルや推奨のファイルなど様々あり、少しややこしいのである程度分けながら説明していきます。
「index.php」
index.phpは簡単に言うと「index.htmlのwordpressバージョン」です。
基本的にwordpress化した場合、htmlのファイルを使うことはなくなりますので、全て拡張子がphpに変わります（各種HTMLファイルを編集する際にもこの通りです）。wordpressのフォルダ内には「index.php」と「style.css」の存在は必要になりますので、とりあえず今はフォルダ内の「index.html」を「index.php」に変更すれば問題ありません。
ただ、これではまだwordpressにオリジナルテーマを表示することはできません。次の「style.css」を作成することによってサイトが表示できるようになります。
「style.css」
このstyle.cssはサイトのデザインなどを指定するファイルではありません。テーマの設定や情報を記述するものなのでみなさんが使用しているstyle.cssなりscssなどとは別に作成する必要があります。
作成はとても簡単です。デザイン用のcssは基本的にcssフォルダに入っていると思うので今回作成するstyle.cssはテーマディレクトリの直下に作成してあげましょう。
そうしたら問題はこの中身です。中身にはテーマの設定や情報を書き込みます。
/*
Theme Name: getfree-wp
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/こちらのソースコードをコピーして「style.css」にペーストしましょう。とりあえず「Theme Name」は登録しましょう。あとの情報は後で埋めれば大丈夫です。
はい、これでwordpressの管理画面の外観>テーマからオリジナルテーマ（今回でいう「getfree-wp」）を選択することができるようになりました。画像では現在「Twenty Twenty-Three」というフォルダが選択されているので、オリジナルテーマ（画像では「getfree-wp」）を選択することでLocalサイトに自分のサイトを表示することができます。
「functions.php」
「functions.php」は簡単に言うと「wordpressのカスタマイズ格納ファイル」です。cssやjsファイルなどを読み込むのもこのファイルの仕事になりますが、そのほかにも機能を追加したりする際に「functions.php」に記述することになります。
このファイルはみなさんのフォルダにはまだ存在していないはずなので、まず「functions.php」のファイルを作成してください。
はい、これで「functions.php」は作成できました。とりあえず今回はcssとjsのファイルをfunctions.phpから読み込みたいと思います。
こんな感じに「index.php」にあったコードをfunctions.phpに移します。ですがこれだけではcssやjsは反映されません。
<?php
//css,jsファイル読み込み
function my_script_init() {
if ( !is_admin() ) {
wp_register_style('ress', get_template_directory_uri() . 'https://unpkg.com/ress/dist/ress.min.css', array(), '1.0', false);
wp_enqueue_style('main', get_template_directory_uri() . '/css/style.css', array('reset'), '1.0', false);
wp_enqueue_script('js',get_template_directory_uri() . '/js/main.js', true);
}
}
add_action('init', 'my_script_init');
</head>の前に<?php wp_head();?>を挿入。それと同時に</body>の前に<?php wp_footer(); ?>を挿入。これでfunctions.phpの内容を読み込むことができます。これでやっとcssやjsをサイトに適用することができました。
「各種HTMLファイル」
先ほど「index.html」を「index.php」に変更した際にも説明しましたが、wordpressのサイトでは基本的にhtml拡張子のファイルを使わずにphp拡張子のファイルを使うことになります。なので他のhtmlファイルも同じく、phpに変える必要があります。
ただ少し厄介なのが「index.php」以外のファイルは「htmlをphpを書き換えるだけではない」ということです。wordpressのphpファイルはそのファイルの役割によって命名規則があります。以下で簡単に説明します。
他にもかなりの種類がありますが、ここではよく使うものだけを紹介しています。
おそらく現在皆さんのフォルダ内にあるのは「pageファイル」のみだと思いますので、該当のhtmlファイルをpageファイルに変更していきましょう。
pageファイルは画像のように、「page-〇〇.php」という形になります。〇〇のところにはページのスラッグ（urlに入るページ名）になります。
ただ、これだけでは最初のページ（index.php）以外のページはサイト上で表示されません。ここからは管理画面で固定ページを作成する必要があります。
管理画面を開くと左側のメニューバーに「固定ページ」というものがあります。これを押すと固定ページを管理する画面に飛びます。固定ページはまだ作成していないので「新規追加」のボタンを押します。
固定ページ編集の画面です。まず固定ページのタイトルを登録します。（カスタムメニューを使用する場合にはサイト上に表示されるので適切なものにしておきましょう）。そして次はスラッグを登録します。画面右側にこの固定ページのリンクが表示されているので、こちらに先ほど「page-〇〇.php」に作成した〇〇の部分を入力します。これでwordpressのデータベースとテーマディレクトリが連携され、しっかりと固定ページがサイト上で表示されるようになります。問題なく表示されていることを確認するために、「公開」をした後にページのリンクを押してみましょう。
問題なくサイトが表示された方は1つ問題が生じていると思います。それは「画像が表示されていない」です。何かミスったかなと思っている方、大丈夫です想定内です。これを解決するためにはphp用に該当箇所のコードを変更する必要があります。
このように書き換える必要があります。結構長いので見切れてしまっていますね。下にソースコードを載せているのでこちらを使用してください。
img src=" <?php echo get_template_directory_uri(); ?>/img/〇〇.jpg" alt="">
あとは「header.php」と「footer.php」を作ることを個人的にはかなりおすすめしているのでその説明もしたいと思ったのですが、今回の記事がかなり長くなってしまっているのでそれはまた別の記事にしようと思います。
wordpress化完了
wordpress化前の静的サイトと同じ画面がLocalサイトでも問題なく表示されていたらwordpress化が完了です。
大変お疲れ様でした。しっかり頭や目を休めてください。
ただ、まだまだwordpressサイト構築は始まったばかりです。「header.php」や「footer.php」を作成したり、便利なプラグインを導入したり、はたまた「functions.php」をいじってさらに機能を拡張させたり、、カスタマイズは無限大です（笑）
このサイトではwordpressに関しての記事を出来るだけわかりやすく、たくさん出しているので是非参考にしてください。
