WordPressでホームページ開設!作成でお世話になったカスタムテクなどなど

こんにちは!

ライターのRH@Gadgedです。

またもや少し更新の期間が空いてしまいましたです・・・。

最近の出来事としては、急にヤフオクが使えなくなってしまいまして原因を辿って行くと中国からの不正アクセスによる利用停止でした汗。

利用停止になると、出品中の商品が全て終了し未払いの売上金も振り込まれないという始末・・。現在サポートとコンタクト取って解除してもらおうとしているところです。

その他の出来事としましては、今回の記事の題材でもあるWordPressによるホームページ(的なもの)作り。

家のすぐ向かいにあるお店のホームページを作らせていただく事になりまして、時間を書けながらゆっくりと作っている最中です。

その時に手を出したカスタムのテクニックなんかをご紹介したいと思います!

グダグダと書いていきますが最後までご覧ください。

スポンサーリンク

サイトイメージを実現するために

WordPress テーマ

カスタマイズ話にはいる前に少々基本的なお話を。

WordPressというのは、サービス自体は無料ながらにも非常にカスタマイズ性が高くネットに出回っているWordPressで作られたサイトというのは少なからずカスタマイズされていると思っています。いじってない方が少ないでしょうし。

また、企業ホームページなども大量に作られているサービスです。

そんなことから、自分の思い通りのサイトを作り上げるにはWordPressが打って付けというワケ!

そんなイメージを実現するためには、土台となるテーマ選びを慎重に行いましょう。

デザイン、SEO両者に優れているものを!

テーマと一言で言っても、数えきれないほど存在しています。

その中から自分にピッタリなテーマを選ぶにはデザイン性に優れ、なおかつSEOにも強いテーマを見つけること。付け足すとカスタム性や機能面で充実しているとなお良しですね!

いくらカスタマイズ出来るとはいえ、土台がしっかりしていないとイメージどおりには行きませんよね。

自分の思い描いている外観に近いものを見つけることが近道です。

あとSEO対策というとプラグインやその他諸々のツールたちでカバーするイメージをお持ちの方もいらっしゃるでしょう。しかし、テーマ自体にSEO対策を施しているものも数多く存在し、それだけでも後々手間がかからないのでオススメです。

ベターですが、それ系のテーマをご紹介しておきますね。もちろん無料ですよ。

  • Simplicity

    名前通りシンプルで、自分好みにカスタマイズすることを前提とした飾り気のないテーマです。もちろんレスポンシブ対応。SEO対策テーマとして根強い人気を誇り、このサイトでもお世話になっているテーマです!

  • Xeory

    こちらは、バズ部が製作を手がけたテーマです。サイトの運営ノウハウをもとに完成させ、コンテンツマーケティングに適しています。ブログ型とサイト型の二種から選ぶことができるため、ホームページ作成にはもってこいのテーマ!

  • STINGER

    「必要なものは揃っている」でお馴染みのSTINGERです。こちらもSEOが小細工敵な感じで対策されていて、初心者向けのテーマといえるでしょう。作った瞬間SEOに強いものを作ることができますよ。できるだけプラグインを不要とするべく元から高機能をコンセプトに作られています。広告も収益率アップなポジションに配置できます!

WordPressをかじったことがある人は必ず聞いたことがあるようなテーマたちだと思っています。テーマ自体も日々改良を重ねていますので、しばらくバージョンアップをしていなければ是非チェックしてみてください!

余談。テーマは一度決めたらしばらく変えない!

ググれば同じようなことが書いてあるはずですが、テーマ決めをしたらしばらくはその状態を維持したほうが無難です。

途中でコロコロ変えたりすると、カスタマイズした部分はもちろんリセット状態。さらにはレイアウト問題や、アクセス数下落にもつながりかねません。

また、テーマとプラグインの相性というのもあるので、再設定などのめんどくさい作業の連発になります。

SEO的にも一回テーマを選定したら変えないほうが良いですよ。

あとは自分のセンスでカスタマイズ!

WordPress

自分のセンスなんて言いましたが、実際WordPressのカスタマイズなんてやっている人が多すぎて、どれも似たり寄ったりみたいな感じ。

僕的には、あんまり実践記録がないカスタマイズなんかはエラーを起こすリスクを考えてあんまり手をださないようにしています。ビビリなんでw

ここからは、ほとんど基本的なことですが僕がホームページを作るにあたって実践してみたカスタムテクをご紹介します!初心者むけということで。

WordPressの構成

構成的には、大きく4つにわかれています。

ヘッダー、サイドバー、コンテンツ、フッター」

この4つ。テーマを編集するときにもこの項目ごとにいじっていく形になります。

では早速!

カスタムメニューを追加

大体のテーマにはカスタムメニューといって、ヘッダー下のメニューバーが実装サれているのですが、もしもない場合にはこのような操作をすれば使えるようになります。

functions.phpを開き、文末に以下のコードを追加します。

add_theme_support( ‘menus’ );

次に、表示するためのコードとしてheader.phpを開き、

<?php wp_nav_menu(); ?>

を追加してファイルを更新すればOK。

初めてやると見慣れないコードばかりで少々緊張しますがご安心を。

これでメニューバーの追加が完了しました!

サイトアイコンの追加

ブラウザでサイトを開いた時に、タブのサイト名の左にあるあのアイコンのことです。

デフォルトだとテーマのロゴか何かだと思いますが、サイトのイメージを際立てるためにもアイコンを追加しておきましょう!

functions.phpを開き、またまた同じく文末にコードを追加していきます。

function blog_favicon() {
echo ‘<link rel=”shortcut icon” type=”image/x-icon” href=”‘.get_bloginfo(‘template_url’).’/images/favicon.ico” />’.”\n”;
}

add_action(‘wp_head’, ‘blog_favicon’);

アイコン設定の場所は、テーマフォルダのテーマ名/images/favicon.icoです。

カスタムヘッダーを発動させる

カスタムヘッダーとは、ヘッダー部分に画像をくっつける機能のこと。

タイトルテキストしか設定できないテーマでいじってみてください。

function.phpを開き、

// カスタムヘッダー
add_theme_support( ‘custom-header’ );
を追加します。コード内に日本語が有りますが問題なく認識されます。
そうすると外観メニューにカスタムヘッダーの項目が増えるので、サイトタイトル画像やイメージ画像なんかを設定してボリュームアップです!

ヘッダーの高さを変える

デフォルトのヘッダーサイズだと貧弱!という場合には思い切ってサイズを変更しましょう!

style.cssを開き、ページ内検索で4.1 ? Site Headerを見つけます。

その中にある.site-header .home-linkmin-height数値をオリジナルに変更するだけです!サイズを変えるだけで印象がものすごく変わりますよ!

コンテンツ幅を変える

サイトの主役部分、コンテンツ部分の幅を変えてみましょう!

サイドバーなんかに押される勢いでインパクトがないのならば広げるのがベストです。

style.cssを開き、ページ内検索で#mainを探して下さい。

#main

{ float: left;

box-sizing: border-box;

width: 740px; padding: 20px 29px;

border:1px solid #ddd;

background-color:#fff;

border-radius: 4px;

margin-bottom: 30px; }

とあるはずです。

  • Width:記事の幅
  • padding:記事内の余白 「padding」内で指定する数によって変更箇所が変わります。

となっているのでお好きな方の数値を変えてみてください。ちょっとずつ更新していくとくずれにくいです。

背景に画像を設定

基本的に背景としては任意の色を変えるスタイルですが、背景を設定したほうがサイトの印象をアピールできます。見栄えも良くなりますし。そのやり方を。

functions.phpを開き、以下のコードを追加します。

$custom_background_defaults = array(

  ’default-color’ => ‘eef5ee’,

  ’default-image’ => get_bloginfo(‘template_url’) . ‘/img/wall-pic.png’,

);

add_theme_support( ‘custom-background’, $custom_background_defaults );

次に機能をオンにするために以下のコードを追加します。

add_theme_support( ‘custom-background’ );

これで任意の画像を背景として設定できます。

以上、基本要素ですがカスタム手順をまとめてみました。

大体これをやれば出来るとは思いますが、マイナーなテーマだとやり方が違ったりするので調べてから実践してみてください。

なお、サイトの安全性を保障するものではないので、行う場合はあくまでも自己責任でお願いします。

サイトがエラーを起こしても当ブログは一切の責任を負えませんので予めご了承願います。

※本公開する前に、ローカル環境で確認してみると安全です!

ローカル環境に関してはこちらがわかりやすく説明されているのでご覧くださいませ。

最後までご覧いただきありがとうございました!

関連記事