WordPress Customize NOTE > WordPress オリジナルテーマの作り方 目次 > WordPress オリジナルテーマの基礎作り

WordPress オリジナルテーマの基礎作り

スポンサード リンク

01

テーマのフォルダを作る

いよいよここからオリジナルテーマ作りを始めたいと思います。 まずは任意の場所で適当な名前のフォルダを作ってください。その中にテーマ関連のファイルを置きたいと思います。ここではそのフォルダを、仮に「sample」とします。

「sample」フォルダ

02

「index.php」「style.css」を作る

「sample」フォルダの中に、「index.php」を作ってください。それと適当な名前のCSSファイルもひとつ作ってください。ここでは仮に「style.css」と呼びます。

「index.php」「style.css」を作る

03

「style.css」の編集

「style.css」ファイルを編集します。テキストエディタなどで開き、次の情報を記述します。

編集: style.css
/*
Theme Name: テーマの名前
Author: テーマ作成者の名前
Description: テーマの説明文。
*/

日本語の部分を任意で書き換えてください。これはWordPressのテーマのCSSファイルでは必要な情報です。WordPressのテーマの認識と、ダッシュボードでテーマを表示するときにこの情報が表示されます。簡単な記述であっても問題ありませんが、通常CSSファイルに直接アクセスされると内容は見えますので、あまりにも大事なことは書かないでください。

ちなみにCSSファイルに日本語を含ませた場合は、「style.css」の文字コードはUTF-8にして保存する必要があります。UTF-8以外にしている方やよくわからない方は、ファイル内の文字をすべて英字にするといいでしょう。
記述できるのは以下の項目です。上記の情報に付け足せます。

Theme Name: テーマのタイトル
Theme URI: テーマのホームページアドレス
Description: テーマの説明
Version: テーマのバージョン
Author: テーマの作成者
Author URI: テーマの作成者のホームページアドレス
Tags: テーマのタグ

04

<任意> テーマのサムネイル画像を作る

必要な方のみ、テーマのサムネイル画像を用意します。テーマを公開したりする予定のある人は作っておくといいかもしれませんが、なくても全く問題ありません。この画像はダッシュボードでテーマを選択するときに使われます。完成したテーマのスクリーンショットだとわかりやすいです。
ファイル名は「screenshot」、形式はPNG/JPEG/GIFのどれかにします。サイズは 300×225 ピクセルで、あとは自由に画像を作ればOKです。

任意でテーマのサムネイル画像を作る

ちなみに今回サンプルで作ったサムネイル画像ですが、使える方はご自由に使ってください。特に規約はないのでご自由にどうぞ。>> もらってやる

05

アップロード&パーミッションの変更

作ったファイルを丸ごとアップロードします。WordPressをインストールしたフォルダにある「wp-contet」の中にある「themes」というフォルダに、「sample」フォルダをアップロードしてください(「wp親フォルダ > wp-contet > themes > sample」)。
また、アップロードした「index.php」「style.css」ファイルのパーミッションを変更します。それぞれ「755」にします。これでダッシュボードからそれぞれのファイルを更新できるようになります。ですがもしダッシュボードからの編集ができなかった場合は、パーミッションを「777」に変更してみてください。

06

テーマを設定する

ダッシュボードに戻ります。ダッシュボードの左メニューにある「外観 > テーマ」を選択してください。すると、さきほどアップロードしたファイルがサムネイルと一緒にあると思います(サムネイル画像を作らなかった場合はサムネイルは表示されません)。「style.css」で記入した情報が表記されているはずです。「有効化」をクリックしてください。現在は白紙ですが、これでブログのテーマがアップロードしたテーマになりました。

「有効化」を押してテーマを選択します

テーマが有効化された

07

テーマの編集はここから

今度は、ダッシュボードの左メニューの「外観 > テーマ編集」をクリックしてください。さきほどアップロードしたファイルをここから編集できます。

テーマの編集はここから

[PR] 《スマホ広告ならAMoAd》圧倒的な広告数、枠、サイズで高収益!

スポンサード リンク

Wordpress 関連書

Amazonより激選したWPオススメ関連書。

[PR] 冷え性・便秘にお悩みの方向け「ほっと熟成発酵しょうが」

「パーマリンク設定」をいじってみる TOP[WordPress Customize NOTE] ヘッダー部分の作成 その1
Wordpress無料テーマ配布中!

WordPress Customize NOTE > WordPress オリジナルテーマの作り方 目次 > WordPress オリジナルテーマの基礎作り



スポンサード リンク

ライセンスフリー 無料素材「ばじねこ茶店」