ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

【初心者向け】HTMLの静的サイトをWordPressテーマ化する方法

WordPress
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

ネコ君
ネコ君

HTML,CSSで作ったファイルをWordPressのテーマに変換したい!

今回はこのような悩みを解決します。

WordPressの学習の一部として、静的なサイトをPHPを使いテーマ化すると言う学習方法がありますが、初心者の方はどのようにすればいいか分からない方も多いでしょう。

静的サイト→テーマ化にはテンプレートのような型があって、慣れてしまえば1時間もあればテーマ化できてしまいます。

この記事ではよく使うWordPress関数の使い方や、テーマ化までの一連の流れをご紹介します。

こんな方にオススメ
  • HTMLファイルをWordPressに転換したい方
  • 初心者で学習の流れを知りたい方
  • WordPressの学習マニュアルが欲しい方
稼げるWebエンジニになる為のオススメの教材

フルスタック・Webエンジニア講座「稼げるエンジニア」なる事に特化した、動画学習コンテンツで、今なら24,000円が1,560円とかなりお得な教材です!
HTML,CSSだけではなく、高単価な案件が豊富なWordPressやJavaScript、PHP、Pythonなどこれ1本でWeb開発における学習が全てできてしまいます!

「起業したり、フリーランスとして仕事をしたい方」「ウェブサイトを作りたい方」「新しい収入源を得たい方」「経済的自由を得たい方」こんな方にオススメです!

※セールは定期的に行われます

スポンサーリンク

HTMLからWordPress化の一連の流れ

まず前提として、index.htmlとstyles.cssが入った(sampleフォルダ)が存在し、すでにコーディングが終わっている事とします。

  1. ローカル環境の構築
  2. 構築した環境のフォルダにsampleフォルダをコピペ
  3. index.html→index.php|styles.css→style.cssに変える
  4. header.php|footer.php|functions.php|single.phpファイルを作る
  5. index.phpを分割し4で作成したファイルに分割する
  6. 色々関数を書き込む
  7. テーマ化終了

かなりざっくりで適当ですがこんな感じです。

1.ローカル環境の構築

まず始めにWordPressを動かすためのローカルサーバーが必要になってきます。

XAMPPやMAMPを使って構築しても良いですが、管理が便利でワンクリックでサーバーができるLocal By Flywheelがオススメです!

2.静的ファイルをローカル環境フォルダに移行

静的ファイルをWordPressとして動かすには、構築したローカル環境フォルダにコピーペーストする必要があります。

プロジェクトの管理画面で作成したローカルサーバーの上で右クリックすると、Reveal in Finderという項目が出てくるので選択します。

【app→public→wp-content→themes→ここにペースト】ペーストする場所は赤の矢印も部分です。

でもこのままではWordPress化はできていません。

スポンサーリンク

3.ファイル名をWordPress用に変更する

静的ファイルはhtml形式になっているのでWordPressが認識できるように.phpに変える必要があります。

またスタイルシートの読み込みも特殊で、styles.cssではなくstyle.cssでないといけません。

この一つのsに長時間悩まされる人も多いので、ここはしっかりと押さえておきましょう。

4.必要なファイルを作成

今回は初心者向けなので、基本的なファイルのみを紹介します。

  • functions.php:関数を指定、作成する
  • header.php:ヘッダー部分
  • footer.php:フッター部分
  • sidebar.php:サイドバー部分
  • single.php:個別ページ部分
  • page.php:固定ページ部分
  • search.php:検索結果の表示部分

基本的に最低限これだけあれば簡単なテーマは作成可能です。

5.index.phpを分割する

index.phpにはヘッダー部分、メイン部分、サイドバー部分、フッター部分があるかと思いますが、

ヘッダー部分→header.phpへ

フッター部分→footer.phpへ

サイドバー部分→sidebar.phpへ

このようにそれぞれカットアンドペーストします。

そしてカットしたindex.php部分に各ファイルを読み込むために

<?php get_header();?>,<?php get_footer();?>,<?php get_sidebar();?>とそれぞれ記述します。

6.必要な関数を書き込む

このプロセスに関しては書き出すと無限にあるので、必ず使う重要な部分だけをご紹介します。

何か実装したい機能があればその都度ググってください。

  • <?php wp_head();?>:ワードプレスの機能を呼び出す
  • <?php wp_footer();?>:同上
  • <?php echo get_stylesheet_uri();?>:スタイルシートの読み込み
  • <?php get_title();?>:記事のタイトル
  • <?php get_content();?>:記事の本文

書くときりがないので、この程度にしておきます。

あくまでイメージを掴んでもらうためのものなので、暗記する必要はありません。

重要なのは「ここにサイドバーを設置したいな」と思ったときに【WordPress sidebar関数】とググれるかどうかです。

まとめ

この記事を参考にHTMLの静的ページWordPress化するイメージができたかと思います。

全体像が掴めたらあとは自走力が重要です。

WordPressの情報はGoogleには山ほどあるので、自分で調べて実行する癖をつけて自分のスキルに変えていきましょう。

最後までご覧いただきありがとうございました。

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

WordPressの学習にオススメの本

WordPressの基礎知識がある程度ある方向けの参考書で、HTMLファイルをWordPressのテーマ化にするまでの過程が詳しく書かれているので、実務にも使えるスキルが身につきます。

また、お客様のニーズで多い、カスタムフィールドの導入方法や、プラグインの開発方法や、管理画面の編集など実務でよく使う技術がよく学べます!

これからWordPressで高単価な案件を取りたい方は必ず読んでおきたい1冊です!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
WordPress
HikoPro Blog

コメント

タイトルとURLをコピーしました