読者です 読者をやめる 読者になる 読者になる

おばちゃんのつれづれ 主にマンガとweb

おばちゃんがライフハックや日常を書きます

素人だけどWPでテーマ自作しようと思う

もしかしたら万一誰かの役に立つかもしれないので、知識ゼロから初心者がWPテーマを自作(or挫折ww)する過程を記録してみようと思います。

参考にさせてもらったサイト

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました

 

テーマ自作にあたっての必須スキル

  1. htmlとcssでHPを作ってアップロードできる知識
  2. WPの既存テーマでHPを作って更新できる知識
  3. すでにWP導入済み

最低限この3つは必要っぽい。

 

必須の事前準備

 バックアップは絶対とらないとマズイ。面倒でもこれだけは済ませましょう。

obatyan1.hatenablog.com

 

ステップ1 HTMLでサイトを作る

HTMLとCSSが理解できない時点ではテーマ自作はちょっと無理ですのでさくっと済ませましょう。まぁ素人のくせにレスポンシブ風味を目指したりして、実際はめっちゃ苦労したわけですが記憶を捏造してさくっと作ったことにします。

だいたいこんなかんじ。

f:id:obatyan1:20160329161221j:plain

 

ステップ2 テンプレートファイル化←いまここ

1 テーマ名を考える

適当。とりあえずthemeにしておきました。

2 新しいフォルダを作る

名前はテーマ名(今回はtheme)にしておく。

3 今作ったthemeフォルダにindexとcssをコピペ

名前を

index.php ←ここ忘れがち

style.css

にしておきます。

うっかり変な変更をしてオシャカにする可能性があるので、indexとcssは移動でなくてコピペして、せっかく作った元データを残しておきましょう(素人が陥りがちな罠)

4 cssの最後に以下をコピペ

 /* Theme Name: theme */

 5 できたフォルダをWPのthemesフォルダに移す

さらっと書いてあるけど、themeフォルダに移すって何?てなった。玄人にはあたりまえかもしれないけど、素人的にはこういうところをしっかり解説してほしいのよねぇ。スクショ追加とかライセンス表示とかそういう上級者情報は別にいらない、ていうか、混乱するからむしろ積極的に欲しくない。

ということで。

themesフォルダに新規テーマを追加する方法

まず、themeフォルダをzip保存

themeフォルダを右クリック→送る→圧縮(zip形式)フォルダー

f:id:obatyan1:20160329163419j:plain

 

そしてWP管理画面左側の 外観 →テーマ →新規追加→テーマのアップロード

f:id:obatyan1:20160329163829j:plain

 

f:id:obatyan1:20160329163739j:plain

 

もう一度 外観→テーマ をみると、themeという名前のテーマが増えてます。

f:id:obatyan1:20160329164019j:plain

 

 

 

とりあえずできた。

でもこれだけだと、せっかくがんばって自作したcssが無効でダサシンプルな見た目になっていますので次回以降調整していきます。

つづき

 

obatyan1.hatenablog.com