【第1回】まずは下準備:WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】

【第1回】まずは下準備:WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】

ぶち。

ぶち。

テーマのフォルダを作る(xxxフォルダ)

これから制作するテーマに、好きな名前(フォルダ名)をつけます。
WordPress一式をダウンロード(またはサーバにインストール)すると、デフォルトのテーマは《wp-content》/《themes》に在ります。その《themes》フォルダの中に、自身のオリジナルテーマのフォルダを作ります。
アップロードの際は、wp-content/themes/←内にフォルダごとUPします。

スタイルシートを作る(style.css)

《style.css》は必須ファイルです。
※ファイル名は、"style.css" でなければなりません。
style.cssには、テーマ名を書いておく必要があります。(省略不可)
style.cssは、wp-content/themes/オリジナルのテーマフォルダ/
直下にアップロードします。

style.css の中身は以下のように書きます。
デフォルトで入っているワードプレスのテーマも同様に、style.cssの冒頭にテーマ名等が書かれてあるので、それらを参考に設定しましょう。※テーマ名は省略不可です。

@charset "UTF-8";

/*
Theme Name: buhi One(テーマ名)
Theme URI:
Author: Youre Name
Author URI: https://xxxxx.xxxxx.ne.jp/
Description: Youre Name is the theme that made...
Version: 1.0
License:
License URI:
Tags:
Text Domain:
*/

スクリーンショット画像を用意する(screenshot.jpg/.png/.gif)

ここで screenshot.jpg/.png/.gif として用意する画像は、テーマ画面で表示されます。
画像のサイズは1200x900(ピクセル)。
この画像はstyle.cssと同じ場所、
wp-content/themes/オリジナルのテーマフォルダ/
直下にアップロードします。

index.php

ひとまず、まっさらな状態の index.php (何にも書いていない空のindex.php)ファイルを用意します。このファイルはstyle.cssと同じ場所、
wp-content/themes/オリジナルのテーマフォルダ/
直下
にアップロードします。

screenshot画像が無くてもよいのですが、その場合は上記のように
画像が無い状態で表示されます。
 

WP管理画面にてオリジナルテーマを選択

wp-content/theme/
                      └── originalTheme/
                                   ├── style.css 
                                   ├── screenshot.jpg
                                   └── index.php(中身はまっさら)

WP管理画面にて、オリジナルテーマが表示されているのを確認して、テーマを有効化します。

この時点では何も表示されませんが、
カスタマイズ画面では、サイト基本情報、メニュー、固定フロントページの設定箇所があるのを確認できます。

ひとまずここまで出来たら、次回はいよいよPHPを書いていきましょう!

【第2回】元となるHTMLソースを用意して:WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】


あなたも記事の投稿・販売を
始めてみませんか?

Tipsなら簡単に記事を販売できます!
登録無料で始められます!

Tipsなら、無料ですぐに記事の販売をはじめることができます Tipsの詳細はこちら
 

この記事のライター

ぶち。

web系IT業界で働く人。Webデザイナー×マークアップエンジニア。

このライターが書いた他の記事

  • 【第3回】headにテンプレートタグを入れる:WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】

  • 【第4回】headerにテンプレートタグを入れる:WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】

  • 【第2回】元となるHTMLソースを用意して:WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】

関連のおすすめ記事

  • 【5年更新型コンテンツ】AIを最大活用するためのリテラシー強化バイブル

    ¥52,980
    1%獲得
    (529円相当)
    こはく@AIを最大活用する人

    こはく@AIを最大活用する人

  • 【超初心者向け】AI猫ちゃんのお料理動画の作り方【スマホでもOK】

    ¥1,100
    1%獲得
    (11円相当)
    Chia

    Chia

  • 【230部突破!】ChatGPT(Claudeでも可)で高品質な記事を作成できる半自動化パック【書き方カスタマイズも実現】

    ¥14,980
    1%獲得
    (149円相当)
    しょー

    しょー