静的HTMLをWordPress化!無料コーディング練習所のPONDESIGNをWordPress化してみた - ふーしゃのWeb制作ブログ

ふーしゃのWeb制作ブログ

元SEアラサー女がWeb制作についての学習をシェアするブログです。

静的HTMLをWordPress化!無料コーディング練習所のPONDESIGNをWordPress化してみた

背景

ずっと気になっていたもの、書籍サンプルの実装レベルに留まっていたWordPressでしたが、昨年取り組んだ無料コーディング練習所のコーポレートサイトをWordPress化する解説動画をYouTubeにて発見。


www.youtube.com

WordPressことはじめから一歩踏み出したい私にぴったり!
ということで、やってみました。
気を付けた点など、備忘録を兼ねてまとめていきます!

前提

無料コーディング練習所の上級編で制作したコードを使用します。
また、WordPressの開発環境構築方法などについてはここでは言及しません。
動画内ではお問合せ機能実装は省略されていますが、本制作では実装します。

無料コーディング練習所 上級編:
webdesigner-go.com

ふーしゃが取り組んだ制作記事:
fuchsia-84.hatenablog.com

成果物

実際のサイトをみる:

制作期間

2024/3/18、3/22の2日間 (お問合せ機能を除く)

※2024/12 お問合せ機能追加、recapture追加と要素の消去 ※2025/1 altの追加、text-transformを使用したスクリーンリーダーへの配慮

WordPress化の手順とポイント

  • 新規オリジナルテーマとしてファイルを配置
    • テーマ配置場所: wp-content/themes 以下
    • .phpにする
    • ニュース一覧ページ: index.php
    • トップページ: front-page.php
    • 各記事のページ: single.php
    • その他: 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
      • カスタムフィールドを追加、表示する
      • 今回は採用ページで募集要項の項目を管理・表示するために使用
  • 投稿をアップロードしてテンプレートを編集

    • テンプレートのクラス構造に合わせてWordPress記事編集でブロックを作成
    • 日付、カテゴリ、記事内容を表示する関数などがポイント
  • 本番環境にアップロード
    • Localの場合
      • 完成ファイルを出力
      • WordPress立ち上げ
      • プラグインAll-in-One WP Migrationを追加、ファイル読み込み
  • 投稿含む各種データ(ニュース記事、事業内容など)を入力

各機能の実装について

ヒーローセクションで最新記事を表示

投稿一覧ページ(今回は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の設定に反映する。

参考

今後・おわりに

今回は制作済み静的サイトをWordPressに移行する手順と方法について、動画を参考にしながら行った作業を元に整理してまとめてみました。

この後いろいろ手を動かしましたが、これでローカル開発環境の構築からオリジナルテーマ制作、投稿や固定ページのカスタム、お問合せ機能の実装などを含めた基本的なサイトは特に何か調べずとも作れるようになったようです...!
今後の制作も楽しみになりました!

このような機会を提供してくださったステックバイワーク (Twitter : @stepbywork) さま 並びに 無料コーディング練習所 (Twitter: @webdesigner_go) さま に心より感謝申し上げます。

今回の経験も、今後に活かして参ります!ありがとうございました!