【WordPressテーマ】HTMLで作った「自作テーマ」をWordPressに認識させてみよう!

WordPress

みなさんこんにちは!おさかなです!

今回は「【WordPressテーマ】HTMLで作った「自作テーマ」をWordPressに認識させてみよう!」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・HTMLファイルをWordPress化する手順を知りたい人
・WordPressのテーマを自作したい人
・WordPressの勉強中の人

ファイル構成の確認

index.html
style.css
ここで注意点があります。
WordPressのテーマを自作するとき、CSSファイルの名前は必ず「style.css」にしてください。
また、style.cssは必ずindex.html同じ階層に置いてください。
おさかなもそうなのですが、普段はcssフォルダの中にcssファイルを入れているので、ついつい間違えてしまいそうになります…💦
おさかな
おさかな

ここでかなり苦戦しました…笑

WordPressのテーマを自作するときには、ある程度決まり事があるので、しっかりと守ることが大切です。

「テーマ詳細」を設定しよう!

それではまず、普通のHTML/CSSファイルを「WordPressのテーマ」として認識してもらうためには、「テーマ詳細」を設定する必要があります。

テーマスタイルシートをコピーしよう!

下記リンク「WordPress Codex」のサイトへアクセスします。

テーマの作成 - WordPress Codex 日本語版
おさかな
おさかな

このサイトはWordPressのテーマを自作する上で、必要なことがまとめられてるから、何か疑問点があれば覗いてみてね!

サイトにアクセスすると、こんな感じになっています!

ページをスクロールしていくと「テーマスタイルシート」という項目があるので、グレーの部分をコピーします。

style.cssに貼り付けよう!

先ほどコピーしたものを「style.css」の冒頭に貼り付けます。

こんな感じ…!

中身を書き換えていこう!

デフォルトのままなので、中身を書き換えていきましょう!

/*
Theme Name: (テーマの名前)
Theme URI: http://example.com/(テーマのサイト等のURL)
Author: (作者の名前)
Author URI: http://example.com/(作者のポートフォリオサイト等のURL)

Description:(ディスクリプション、任意の文字列)
Version: 1.0(バージョン、初回は1.0でOKです!)

※ここから下の項目はなくてもOKなので、今回はカットします!
*/

今回はテーマ名が「Cool Dark」で、作者が「OSAKANA」とした場合の設定をしてみました!

おさかな
おさかな

こんな感じで!無事に中身の編集が完了したよ!

 

ファイルをアップロードしよう!

次に編集したファイルをアップロードしていきます。

FTPソフトであれば何でも大丈夫なのですが、今回は「WinSCP」を使用していきます。

WordPressがインストールされていることを前提としているので、まだの方はコチラの記事から導入してください!(※準備中)
それでは、ファイルををどこへアップロードするか見ていきましょう!

wp-content/themes/ここにアップロード
実際に画面を見た方がわかりやすいと思いますが、「wp-content」というフォルダの中にある「themes」というフォルダの中に「テーマのフォルダ」を入れるといった流れです!
他のフォルダは絶対にいじらないように注意していください!
データが失われる恐れがあります。
おさかな
おさかな

なんだか開けても開けてもフォルダがいっぱいあって、「マトリョーシカ」みたいだなあ…笑

テーマとして認識されたかチェックしよう!

それでは、実際に認識されたかどうか確かめていきましょう!

まずWordPressの「ダッシュボード」>「外観」>「テーマ」へ移動します。

すると、こんな感じで先ほどアップロードした自作テーマが、他のテーマと同じように表示されています…!(やった~!)

これで、無事にHTMLファイルをWordPressのテーマとして認識してもらうことができました!(おめでとう🎉)

最初は少し戸惑うことが多いかもしれませんが、1つ1つ順番にクリアしていけば大丈夫ですので安心してください…!

それでは次回またお会いしましょう!

おつかれさまでした!☕

 

感想・まとめ

今回は「【WordPressテーマ】HTMLで作った「自作テーマ」をWordPressに認識させてみよう!」について、書いていきました…!

いかがだったでしょうか?

まずはWordPressにテーマを認識してもらう、という第一歩を踏み出せたと思います…!PHPの学習をする上でもWordPress化は色々と勉強になることが多いので、ぜひ頑張ってチャレンジしてみてください…!(応援してます!)

おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

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