背景
ずっと気になっていたもの、書籍サンプルの実装レベルに留まっていたWordPressでしたが、昨年取り組んだ無料コーディング練習所のコーポレートサイトをWordPress化する解説動画をYouTubeにて発見。
WordPressことはじめから一歩踏み出したい私にぴったり!
ということで、やってみました。
気を付けた点など、備忘録を兼ねてまとめていきます!
前提
無料コーディング練習所の上級編で制作したコードを使用します。
また、WordPressの開発環境構築方法などについてはここでは言及しません。
動画内ではお問合せ機能実装は省略されていますが、本制作では実装します。
無料コーディング練習所 上級編:
webdesigner-go.com
ふーしゃが取り組んだ制作記事:
fuchsia-84.hatenablog.com
成果物
実際のサイトをみる:
制作期間
2024/3/18、3/22の2日間 (お問合せ機能を除く)
※2024/12 お問合せ機能追加、recapture追加と要素の消去 ※2025/1 altの追加、text-transformを使用したスクリーンリーダーへの配慮
WordPress化の手順とポイント
- 新規オリジナルテーマとしてファイルを配置
- 新規固定ページを必要ページ分作成
- 各phpファイルをテンプレートとして認識させる
- Template Name: xxxのおまじない
- ヘッダー・フッターはheader.php、footer.phpを各ページで読み込む
- get_header()、get_footer()を使用
- リンクと画像のパスを修正
- echo template_directory_uri()、get_home_url()を使用
基本のプラグインを導入
- Akismet Antispam: Spam Protection
- 無料でスパム対策してくれる
- 一つのidで複数サイトに適用できる
- UpdraftPlus
- サイトをバックアップ管理できる
- SEO SIMPLE PACK
- 設定画面から効率的にOGPなどを編集できる
- 設定内容を反映したタグを出力してくれる
- WP-PageNavi
- 投稿一覧ページのページネーションを扱う
- Custom Post Type UI、Custom Post Type Permalinks
- 投稿タイプのカスタマイズできる
- 今回は事業内容を投稿として管理・表示するために使用
- Advanced Custom Fields
- カスタムフィールドを追加、表示する
- 今回は採用ページで募集要項の項目を管理・表示するために使用
- Akismet Antispam: Spam Protection
投稿をアップロードしてテンプレートを編集
- テンプレートのクラス構造に合わせてWordPress記事編集でブロックを作成
- 日付、カテゴリ、記事内容を表示する関数などがポイント
- 本番環境にアップロード
- 投稿含む各種データ(ニュース記事、事業内容など)を入力
各機能の実装について
ヒーローセクションで最新記事を表示
投稿一覧ページ(今回はindex.php)以外で投稿を読み込むにはnew WP_Queryが必要。
引数に読み込みデータ数など指定する配列をとる。
今回は最新3件を表示したいのでposts_per_pageを3とした。
$wpargs = array( 'post_type' => 'post', 'posts_per_page' => 3, 'order' => 'DESC', 'orderby' => 'data', ); $the_query = new WP_Query($wpargs);
この処理が書ければ、あとの使用関数などは同一なので必要なものを使用する。
お問合せフォーム
プラグインComtact Form 7を使用。
設定側でフォーム内容を編集していき、必要ならhtmlタグを追記して調整する。
スパム対策: recaptchaの追加
GoogleでアプリとしてWebサイトを登録し、keyを発行したらWordPressの設定に反映する。
参考
- 無料コーディング練習所 | 未経験からWebデザイナーへ!【2025年版】
- 【上級編】企業サイトのコーディング練習 | 未経験からWebデザイナーへ!【2025年版】
- 無料コーディング練習所 ねこポンさんTwitter: @webdesigner_go
- 【画面録画】静的HTMLのWebサイトをWordPressに組み込んでみた(YouTube)
- 大阪梅田のホームページ制作会社@stepbywork YouTubeチャンネル
- 動画制作者 stepbywork 上杉さん Twitter: @stepbywork
- reCAPTCHA のドキュメント | reCAPTCHA Enterprise | Google Cloud
今後・おわりに
今回は制作済み静的サイトをWordPressに移行する手順と方法について、動画を参考にしながら行った作業を元に整理してまとめてみました。
この後いろいろ手を動かしましたが、これでローカル開発環境の構築からオリジナルテーマ制作、投稿や固定ページのカスタム、お問合せ機能の実装などを含めた基本的なサイトは特に何か調べずとも作れるようになったようです...!
今後の制作も楽しみになりました!
このような機会を提供してくださったステックバイワーク (Twitter : @stepbywork) さま 並びに 無料コーディング練習所 (Twitter: @webdesigner_go) さま に心より感謝申し上げます。
今回の経験も、今後に活かして参ります!ありがとうございました!