みなさんこんにちは!おさかなです!
今回は「【WordPressテーマ】HTMLで作った「自作テーマ」をWordPressに認識させてみよう!」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・HTMLファイルをWordPress化する手順を知りたい人
・WordPressのテーマを自作したい人
・WordPressの勉強中の人
ファイル構成の確認
style.css
ここでかなり苦戦しました…笑
WordPressのテーマを自作するときには、ある程度決まり事があるので、しっかりと守ることが大切です。
「テーマ詳細」を設定しよう!
それではまず、普通のHTML/CSSファイルを「WordPressのテーマ」として認識してもらうためには、「テーマ詳細」を設定する必要があります。
テーマスタイルシートをコピーしよう!
下記リンク「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の「ダッシュボード」>「外観」>「テーマ」へ移動します。
すると、こんな感じで先ほどアップロードした自作テーマが、他のテーマと同じように表示されています…!(やった~!)
これで、無事にHTMLファイルをWordPressのテーマとして認識してもらうことができました!(おめでとう🎉)
最初は少し戸惑うことが多いかもしれませんが、1つ1つ順番にクリアしていけば大丈夫ですので安心してください…!
それでは次回またお会いしましょう!
おつかれさまでした!☕
感想・まとめ
今回は「【WordPressテーマ】HTMLで作った「自作テーマ」をWordPressに認識させてみよう!」について、書いていきました…!
いかがだったでしょうか?
まずはWordPressにテーマを認識してもらう、という第一歩を踏み出せたと思います…!PHPの学習をする上でもWordPress化は色々と勉強になることが多いので、ぜひ頑張ってチャレンジしてみてください…!(応援してます!)
おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!
それでは今回はこの辺で!
ここまで読んでくださり、ありがとうございました!
おさかなでした!
【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!
「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!