プログラミング

HTMLとCSSで書いたLPをWordPress化した

Pocket
LINEで送る

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関数

⑦フッターの作りこみ

WordPressのテーマを分割して作成してみよう


(1)wp_footer関数

まとめ

以上、簡単ではありますが「HTML、CSSファイルでデザインしたLPをwordpressのテーマ化」の手順をロードマップ的にまとめてみました。

個人的には「②テーマ宣言(css)作成」のところでwordpressがテーマとして認識せず時間がかかりましたが最終的にはにわマンさん@haniwa008の記事でテーマ宣言のところを採用したらうまくいきました。はにわマンさんに感謝!そして読んでいただき感謝!

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください