wordpressの案件を受注するために、HTML、CSSファイルでデザインしたLPをwordpressのテーマ化してみましたので備忘の為にロードマップにします。
wordpressテーマ化の難易度は易しいと思いますが色々とググりながらやるのも面倒かと思いますので下記に必要なリンクをまとめましたので参照されたいと思います。
1準備
①仮想環境⇒XAMPP/MAMP
すべてこちらのサイトでわかります⇒https://bazubu.com/xampp-wordpress-23795.html
②本番環境⇒レンタルサーバ/ドメイン取得
https://www.xserver.ne.jp/
③Wordpressのダウンロード
https://ja.wordpress.org/
2手順
1仮想環境でテーマ化する
①xampp\htdocs直下にWordpressをアップロード
https://morningcoding.me/wordpress-make-theme-day2/
②wp-content/themes/【任意のディレクトリ】作成/HTML&CSSをアップロード
https://morningcoding.me/wordpress-make-theme-day2/
2、WPが読み取れるファイルに変換
①ファイル名変更 index.html→index.php
https://morningcoding.me/wordpress-make-theme-day2/
②テーマ宣言(css)作成
https://haniwaman.com/static-to-wordpress/
③index.phpからファイルの切り分け
https://www.youtube.com/watch?v=ofveXkQvHt0
https://morningcoding.me/wordpress-make-theme-day3
④切り分けたファイルを読み込む関数を指定
https://morningcoding.me/wordpress-make-theme-day3
(1)get_header関数
(2)get_footer関数
(3)get_sidebar関数
⑤ ヘッダーの作りこみ(ロゴにリンクを張る)
https://morningcoding.me/wordpress-make-theme-day3/#i
(1)home_url関数の設定
(2)wp_head関数の設定
⑥ページタイトルタグの修正
https://morningcoding.me/wordpress-make-theme-day3/#i-3
(1)wp_title関数
(2)is_home関数
⑦フッターの作りこみ
https://morningcoding.me/wordpress-make-theme-day3/#i-4
(1)wp_footer関数
まとめ
以上、簡単ではありますが「HTML、CSSファイルでデザインしたLPをwordpressのテーマ化」の手順をロードマップ的にまとめてみました。
個人的には「②テーマ宣言(css)作成」のところでwordpressがテーマとして認識せず時間がかかりましたが最終的にはにわマンさん@haniwa008の記事でテーマ宣言のところを採用したらうまくいきました。はにわマンさんに感謝!そして読んでいただき感謝!
コメント