WordPressのオリジナルテーマを作る時にまずやることは『何をやるのかを知る』

2019 11/18
Wordpressのオリジナルテーマを作る時にまずやることは『何をやるのかを知る』
こちらは、オリジナルのWordpressテーマを作るべく、日々の備忘録として書いてあります。

ワードプレスに慣れてくると、デザインが気になってきますよね。
私もその内の一人です。
ワードプレスは無料のブログソフトみたいなものですので、どうしてもデザインがブログに偏りがちです。
(ホームページ風にも出来ますが、やはりブログっぽさは拭えません)

とはいえ、やはりワードプレスで小説サイトを作れるならば、その方が楽です。
なので、小説サイトとして最適なオリジナルテーマを作ることにしました。

私と同じくオリジナルのテーマを作りたい方のお役に立てるといいなと思い、備忘録的に日々綴っていこうと思います。

 

目次

「Wordpressオリジナルテーマの作り方」で検索し、複数のサイトを調べる

何をすればテーマが完成するのか? を全体的に把握しておきましょう。ざっくりでもいいです。
行き止まりかもしれない先の見えない洞窟よりも、宿屋のある村に抜け出せる大きな森に冒険に行く方が断然いいです。ゴールが見えますし。
ですので、何をするかを調べておきましょう。

そして、何をしなくていいかも知っておくといいです。
やらなくていいこと(人に任せた方がいいこと)は、どんなことでも存在します。
それを知るだけでもかなり効率はいいです。基礎力がついたら、あとはそぎ落とすって感じですね。

最初の基礎力をつけるということで、1つポイントです。
最低でも5つのサイトは調べてみて下さい。
1つのサイトを参考に進めていき、途中でどうしてもわからない部分や(PCなどの)環境の違いで手詰まり状態になることもありますので、複数のサイトを参考にしましょう。
web上だけでなく、本もとても有益です。
本は下手なことが書けないので、最新のもので自分に合ったものを一冊持っておくことをおすすめします。

参考にしているサイト

Plusers
XAMPPを使ってWordPressテーマをローカルで作成・編集する
XAMPPを使ってWordPressテーマをローカルで作成・編集するWordPressテーマを作成する際に、Web上で直接編集するのではなくフリーソフトのXAMPPでローカル環境を構築することでメインサイトに影響を与えることなく作業することがで...
Webクリエイターボックス
WordPress オリジナルテーマの作り方 3.0+
WordPress オリジナルテーマの作り方 3.0+WordPressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れる...
Stocker.jp / diary
おそらく最もわかりやすいWordPressテーマ制作チュートリアル
おそらく最もわかりやすいWordPressテーマ制作チュートリアルはじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。サンプル付きで、PHPやWordPressが初めての方にも分かりやすく解説し...
寝ログ
WordPress経験の浅い、PHP苦手の僕が初テーマ作成までにやったこと
WordPress経験の浅い、PHP苦手の僕が初テーマ作成までにやったこと素人なりにWordpress入門サイトを見ながら、テーマを作る過程をまとめました。
wp.geek
WordPressのテーマを自分で作成してみたら意外と簡単だった!
WordPressのテーマを自分で作成してみたら意外と簡単だった!WordPressを使ってサイトを制作する上で、テーマの選択はSEOを考えた上でもSNS運用を考えた上でも非常…

書籍

本は少し古いのですが、こちらと一番最初にご紹介したサイトをメインに参考にさせてもらっています。

 

調べてわかった全体的なやることリスト

  • WordPressをローカルで動かせる状態にする
  • ローカルで動かせるソフトをインストール、設定する
  • オリジナルテーマの元となるWordpressをインストールする
  • 簡単にかつキレイにコードを打ち込めるソフト(エディタ)のインストール
  • どんなサイトデザインにするかネット検索し、紙に書く
  • テーマカラー(アクセントカラー)を決める
  • htmlとcssの知識
  • htmlとスタイルシートの作成
  • PHP(WP仕様)にコードを変えていく
  • デザインをカスタマイズする

一つずつ簡単に説明します。

WordPressをローカルで動かせる状態にする

例えるなら、「写真の出来上がり具合をいちいち現像しないとわからないカメラではなく、スマホのカメラで撮影すればいいですよね」ってことです。

テーマをカスタマイズするのに、FFFTPソフトでサーバーへアップロードし、ネット上で更新しながら確認するなんて作業ははっきり言って面倒くさいし手間です。時間もかかります。

それならばFFFTPにアップせずとも、コードを変更した後、ブラウザの更新で確認できればそちらの方がいいですよね。

これがWordpressをローカルで動かす状態ということです。

ローカルで動かせるソフトをインストール、設定する

Macなら『MAMP』、Windowsなら『XAMPP』というソフトを利用しましょう。
(本来はローカルサーバーと言うのですが、こちらでは敢えてツールやエディタも「ソフト」と表現します)

私は『XAMPP』を利用しています。こちらの説明は、別記事でお伝えしますね。

オリジナルテーマの元となるWordpressをインストールする

WordPressの原本みたいなものです。
初めてインストールした状態みたいになります。

簡単にかつキレイにコードを打ち込めるソフト(エディタ)のインストール

メモ帳ではないテキストエディタならそちらでも十分ですが、コードというのは、ある程度整頓されていないと修正する時に非常に面倒くさいです。

↑↑こんな風に段落分けされていた方がマトリョーシカのような構図みたいでわかりやすいですよね。
そのためのソフトです。

私は『ATOM』を利用しています。

どんなサイトデザインにするかネット検索し、紙に書く

頭使って疲れていると思いますので、ここでテンション上げましょう。
私はやっぱり「どんな演出にしようかな~?」とデザインを考えている時間が好きです。
どんなデザインにするかは「かっこいいサイト」など検索すればたくさん出てきます。色々と調べてみるのもいいですよ。

デザインを見るだけなら『pinterest』のようなデザインサイトでイメージを掴むのもありです。私はよく参考にさせてもらってます。

こんなサイトにしたい!と思ったら、まず紙にラフ画を描きましょう。メインカラーを決めてもいいですよね。

テーマカラー(アクセントカラー)を決める

小説サイトなので基本は『白』が鉄則です。文字は『黒』
よく『黒』などの暗い色を背景にされている方もいらっしゃいますが、はっきり言って読みにくいです。
ファンが既にいらっしゃる作家さんならいいのですが、やはり読者さんに負担はかけないようにするのがサイト運営では大切なことになります。

好きな色を3色ほど選んでおくといいですね。
もし白黒以外でないという方は、以下のカラーサイトを参考にするといいと思います。(私もよく利用しています)

No Image
Palettable

html&cssを学ぶ

先にhtmlでページを作り、後からPHP形式(Wordpress仕様)にするイメージです。
サイト作成やデザインをカスタマイズするには、やはりこの知識は必須です。

私は15年くらい前に数年間、ホームページを作成していたのですが、仕様が変わってくると知識不足で手詰まります。

行き詰まってからネット検索してもいいし、プログラミングが学べるサイトでスキルアップしてもいいし、本を買ってもいいと思います。

私は『プロゲート』というサイトでプログラミングを学び、わからないところはネット検索しています。
ゲーム感覚で進められるので楽しいです。
(本も買いましたが、長いコードの場合は電子書籍でない限りかなり厳しいです)

あとは『ドットインストール』というプログラミング学習サイトも有名ですよね。こちらのサイトでは『ATOM』(コードエディタ)を利用するので、『ATOM』にも慣れてプログラミングも学べるならこちらの方がいいかもしれません。
3分くらいの動画を見ながら一緒にコードを打ち込んでいく感じです。

 

オリジナルテーマを作る時は、まず自分は何をやらなきゃいけないか、を考えてみましょう!




この記事が気に入ったら
いいね または フォローしてね!

関連記事

コメント

コメントする

目次