FileMaker以外にWordPress、node.jsなど興味あることを発信するページ!

FileMakerマニアが語るプログラミング雑学

WordPress

オリジナルテーマ作成から深掘りするWordPress その1

投稿日:2021年1月11日 更新日:

今回はオリジナルテーマの作成を取り上げます。cocoonなどのテーマをカスタマイズする方法について調べる一方、オリジナルテーマを作るってどうやるんだろうと思いを巡らせていたところ意外にも簡単だったので記事にします。
注:この記事は学習の備忘録として書いています。

この記事を読むことでオリジナルテーマの作成手順が分かります。

素材の準備

ここでは、簡単にhtmlでケーキ屋さんのトップページを作成しました。これを元にWordPressに落とし込んでいきます。落とし込みを学ぶことはすなわち、オリジナルテーマの作り方を学ぶと言うことになります。

fig1 sample page html

こちらの素材はフォルダにsampleThemeと名前を付けてその中にindex.html、cssとimagesフォルダを作成してあります。

fig2 素材folderの中身

themesフォルダにオリジナル素材を挿入

ここでは、検証用にLocalを使用して説明します。
以下の様にthemesフォルダに素材をまるっとぶち込みます。

fig3 オリジナル素材をまっると挿入します
fig4 sampleThemeの中身

この状態でWordPressの外観 > テーマ を選択すると下図のようにテーマが壊れていると表示されます。
原因は、

  • index.phpファイルがない
  • style.cssファイルがない

ということになります。WordPressはphpでファイルをコントロールしていますのでindex.htmlではなくindex.phpが必要となります。また、テーマのお作法としてstyle.cssが必要になります。ここでいうstyle.cssは装飾のためのcssではなく、後ほど述べるthemeとして認識させるためのcssファイルになります。

fig5 エラー表示

style.css ファイルをつくる

 ここからはエディターを使いましょう。先ずは、style.css ファイルを作ります。ファイルにはコメントアウトでテーマであることを認識させるよう記述します。今回は下図のように記述しました。この中で必須なのはTheme Nameです。これがないとテーマと見なされません。

fig6 テーマであることを認識させるために記述する

 ここでダッシュボードからテーマを見てみましょう。ちゃんとテーマとして認識されました。また、コメントアウトした内容がテーマに反映していますね。このようにstyle.cssはテーマとして認識する役割を持っています。
 しかし、style.cssによって認識はされたものの壊れているテーマとアラート表示されています。それもそのはず、まだ必須ファイルであるindex.phpがありません。

fig7 index.phpがない

index.php ファイルをつくる

 それでは、index.phpを作成しましょう。作成といっても拡張子をhtmlからphpに変えるだけです。
 次に装飾用style.css(先ほどと同じ名前だがこのcssファイルは装飾用で前述のstyle.cssとは異なる)と画像のパスを修正します。WordPressはwp-contents配下のパスとなるようです。今回のケースで言うと、
stylesheetは
<link rel=”stylesheet” href=”css/style.css”> を
<link rel=”stylesheet” href=”http://sample.local/wp-content/themes/sampleTheme/css/style.css”>

imageは
<img src=”images/MV.jpg”> を
<img src=”http://sample.local/wp-content/themes/sampleTheme/images/MV.jpg”>

それぞれ書き換える必要があります。エディタソフトをつかってちゃちゃっと置換してしまいましょう。

WordPressで表示してみる

ここまでをまとめます。

  • WordPressに必要なstyle.cssをThemeフォルダに作成
  • style.cssにテーマと認識するためのコメントを記載
  • WordPressに必要なindex.phpをThemeフォルダに作成
  • index.phpのパスを修正

ここまでで、最低限必要な作業が終わりました。実際にWordPressでひょうじしてみましょう。型崩れしていなければオッケーです。

fig8 WordPressで表示

今日はここまでです。次回テンプレートファイルとか

Follow me!

-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

オリジナルテーマの作成から深掘りするWordPress その5 〜カスタムヘッダー 〜

今回はヘッダー画像を変更する場合について、クライアント目線で考えてみました。いろいろ調べてみたことを整理するため記事にします。 miku-nosuke この記事を読むことでカスタムヘッダーについて理解 …

オリジナルテーマ作成から深掘りするWordPress その2

前回、index.htmlからindex.phpへ変更した時にstyle.cssやimgのパスを変更しました。パスをエディタソフトで書き換えましたが、WordPressには便利な関数があります。今回は …

WordPressカスタマイズ その2 初心者でもわかる、子テーマをつくる方法

前回は子テーマの必要性について記事にしました。今回は実際に子テーマを作ってみます。必要なスキルとしては以下になります。 htmlの基礎知識(コードを書いたことがある)cssの基礎知識VS codeなど …

オリジナルテーマ作成から深掘りするWordPress その3

今回は、テンプレートファイルについてです。htmlでwebサイトを構築する際に「面倒だな〜」と思うことがあります。それを解決すべくWordPressには便利な機能が備えられています。その一つがテンプレ …

WordPress カスタマイズ その1

2020年現在、ホームページの25%はWordPressで作られていると言われているほど勢いのあるWordPress(以下WP)。そんなWPについて、いま、まさに学習しています。学習してみるといろいろ …

プロフィール

miku-nosuke

職業:web制作者
生息地:東京都
趣味:ジョギング、コーディング、ガーデニング

もの作り大好き!FileMakerは25年の経験で多くの業務システムを作成。html、cssなどフロントも大好き!
まったくの別業界から好きなことに没頭したい、好きなことを仕事にしたいと思いプログラミングを学習する。それまではノンコードデータベースソフトFileMakerに没頭する。はまりすぎてFileMaker選手権で受賞しFileMakerを中心に活動する。
どの言語を学ぶにもhtml、css を知らないと話にならないと気づく。html、css、WordPress、サーバー構築などを語ります。

50歳を過ぎてふと思ったんだ、自分のやりたい事って今の仕事だったのか?
そんな時にたまたま見た日本人3Dグラフィックデザイナーの成田さんを題材にした番組。彼は45歳でグラフィックデザイナーを志、ついにはStarWarsの制作を手がける。そんな彼の言葉「人生に失敗していたんだ。この年になってはじめて自分のやりたいことに気付き、やり直したい」に感銘を受ける。

PAGE TOP