【WordPressカスタマイズ】テーマは自分で作成できる

2018年8月14日

Chay teeと申します。
30代前半の主婦。
WEBデザイナーとして働いています。
≪自己紹介はこちら≫

これまでに経験した『婚活』や、『WEB制作』、『趣味』に関することいろいろ書いていこうと思います。

WordPressのテーマは自分で作成できる!

やっとWordPressのカスタマイズが完成しました!

WordPressにはテンプレートというものがありますが、有料であったり、ある程度、規定も決められていため使用していません。

このブログは一から作成しています。テーマを自分でデザインし、カスタマイズしています。

勉強すれば誰でもテーマを作成することができます。
※ただしhtmlやcssの知識がある前提で説明をしていきます。

 

作成手順① どんなブログするのか?タイトルは?

まずは超基本となりますが、どんなブログを作りたいのか?

・専門に特化したブログにするのか?
例えば、旅行に特化して各地を巡った経験の記事をメインに書いていくのか・・・などなど。

・雑記ブログにするのか?
なんでも書いてよし!ただしカテゴリーは多くても6個ぐらいまでがよいかと。
あまりカテゴリーが多いと見にくくなるデメリットがあります。

一つのことに詳しい、豆知識が豊富な人は特化ブログの方が書きやすいかもね!
逆に雑記ブログはジャンルを絞らないので、自由に記事が書ける。
いろんなことに興味がある人は雑記ブログの方が書きやすいかも!

タイトルは特化ブログであれば決めやすいけど、雑記ブログであればドメインが題名でも良いと思います!
その方が覚えてもらえやすいかも。

作成手順② ブログのレイアウト・デザインを決める!

ラフにレイアウト・デザインを描いていく

白紙に簡単にブログのデザインを描いていきましょう。
お手本のブログか何かあれば、それを参考にレイアウトします。

参考ブログをまるまるパクりはダメです!

一般的なブログだと、記事メインとサイドバーの2カラムなパターンが多いです。

※カラムは列のこと

●2カラム・・・メイン部分とサイドバーの部分の二構成
●3カラム・・・サイドバーが両サイドあって中央にメイン

ブログカラーを決める

カラーの基本は
ベースカラー:メインカラー:アクセントカラー
   70  : 25 :  5

●ベースカラーは原色よりもパステルカラーの方が目に優しい。
●色の組み合わせは12相関図のお隣さんの色と相性がよい。

色は見る人に不快感を与えなければ何でもOK!ただし人を惹きつける色の組み合わせがあるもの事実です!
自分の身の回りの持ち物やお菓子のパッケージなども参考になりますよ!

イラレ・フォトショ・XDでカンプを作成する

レスポンシブデザインを意識してカンプを作成しましょう!

ブログを見る人は8割方はスマホから見ています!

スマホ対応してないブログはまず見ない!と言っても過言ではありません!

デザインのポイント

  • 何カラムで作成するのか。
  • 作成手順①に合ったデザイン・イラストであること。
  • ナビメニューには何をいれるか。
  • ブログカラーを決める。
    ベースカラー:メインカラー:アクセントカラー 70:25:5
  • スマホ対応のデザインであること。

 

作成手順③HTMLでブログを作成する

カンプをもとにコーディングしていきます。

サイトを一つも作成したことがなければ、難易度は高いかもしれませんが、htmlとcssができればある程度なんでもできるようになります!

作成手順④HTMLをPHPに変換する

ファイル名の拡張子をまず【.html】⇒【.php】に変える。

htmlサイトとwordpressの違い

◆HTMLサイト・・・企業のホームページなどが多い。ローカル上で作成し、アップロードする。専門的知識がないと更新作業は難しい。

◆WordPress・・・いわゆるブログ・投稿型ページがある。オンライン上で更新できる。インターネットサーバー上のWordpressシステムを利用する投稿の仕方さえわかれば、専門的な知識は必要ない。更新回数が多い場合はWordPressで企業のホームページを作成する場合もある。

WordPressはオンライン上のブログなので、拡張子をPHPにしないと見れない状態となる。

WordPressカスタマイズの参考書の紹介

・WordPress標準デザイン講座

  

私はこれを3回ぐらいやってみました!内容としては難しいけど、本当に勉強になります!
イラストもちょこちょこ出てきて可愛い!

HTMLをPHPのコードに変換する一例

//画像ファイルを表示
○○
//画像ファイルを表示~PHPを入れる~
○○

 

<?php echo get_template_directory_uri(); ?>
を追加します。

PHPがまだ理解できなくても大丈夫です。
本に詳細が書かれています!

よく使うコードはメモなどに保存しておくと、すぐコピペで使えて便利です!

 

検索

◆プロフィール◆

ちゃいてぃ

チャイラテが好きな広島県在住の30代主婦。
将来在宅ワーカーを目指し中。
20代の頃の婚活経験をエッセイにしたものや、結婚生活、WEB制作の備忘録、在宅ワーカーになるために日々奮闘している様を綴ったブログです。

ぱちょたつ

ちゃいてぃが犬が欲しすぎて妄想上に生み出した犬の妖精。
ぷりてぃフェイスとは裏腹に毒舌とツッコミが得意。

Twitterはこちら
twitter-bana