WordPressでHPを改変してみました! Vol.1

太陽こんにちは。 太陽
東京・北千住にある 隠れ家サロン、頭蓋骨調整専門サロン クレニオセラピー・アディオ
クレニオ セラピストの 坂本 儀恵 (Yoshie Sakamoto) ですしあわせ

以前、HP制作会社の Webディレクターをしていたこともあり、今までは自分でデザインし、AdobeのDreamweaverで作成していました。それでも別に問題はなかったのですが、別のお仕事でどうしてもWordpressを使用したサイトを作らなければならなくなり、本を買って勉強することに・・・。

ですが、いまいちよく分からず、時間を作ってWordpress講座なるものに参加し、基礎的なことを教えてもらうことにしました。一日の講座でしたが、PCを使いながら教えてもらったので大体のことは把握できました!
あとは、自分で使いながら細かいことを調べていくことに!!

まずは、自分の希望に合ったテーマを探していく。

無料・有料を含めると、とんでもない数がある WordPressのテーマ。
その中から一番のものに出逢えるのは奇跡かもしれないですね。

カート付きのものにしてみたくてカート付きのテーマを検索。いろいろと調べてみました。
ですが、やはり使ってみないとイメージがつかないので、とりあえず選んだのが『Welcart』。
無料なので、気軽に試せます!

プラグインとして別のテーマにも適用できるようですが、チョコチョコっと片手間に作り替えるには複雑そうだし、まだまだ私の知識不足もあるので、Welcart が出している無料テーマで四苦八苦してみることにしました。
そのチョイスが、後々になって苦しむことになりましたが・・(笑)

元々は、こんな感じでした・・ f(^_^;;)

WordpressでHPを改変してみました! -Welcart-

デザインは後回し。主要なページ作成!

一応動いているサイトなので、トップページとお問い合わせページ、スクールページだけ作りました。
それからじっくりと、このテーマについてがっつり調べる!!

編集しやすいように、子テーマを作る!

このデザインではあまりにもひどすぎるので、デザインしやすいようにスタイルシートを使いたい!
だけど、親テーマをいじって壊してしまったらリスクが高すぎる・・
それに、テーマは今後も修正版がリリースされます。テーマを直接変更してしまった場合、アップグレードを行うとせっかくのカスタマイズが失われてしまいます。

ということで、まずは子テーマを作ります。
私はこのページを参考にしました。 ⇒ Welcart Basic の子テーマの作り方

私の場合ですが、
親テーマと同じ階層に「welcart_basic-child」というフォルダーを作成し、以下の3つのファイルを作成します。

・style.css

style.css は必須となります。冒頭に下記のコメントを入れて作成します。
/*
Theme Name: Welcart Basic Child
Description: Welcart Basic Child Theme
Author: Collne Inc
Template: welcart_basic
Version: 1.0.0
*/

あと、スタイルシートを小分けして使いたかったので「style-child.css」を作成し、「style.css」からimportしておきました。他にもスマートなやり方はあるでしょうが、とりあえず一番かんたんな方法で!

・functions.php

親テーマのstyle.cssを読み込む設定のファイル。その他ユーザー関数などもこのファイルに記述することになります。このファイルは、親テーマの functions.php よりも先に読み込まれます。
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘parent-cart’, get_template_directory_uri() . ‘/usces_cart.css’, array(‘parent-style’, ‘usces_default_css’) );
}

頭に、「<?php」 をつけるのをお忘れなく!
私はこれを忘れてアタフタ・・・。少し時間を使ってしまいました。

・usces_cart.css

このファイルは、商品詳細ページ・メンバーページ・カートページ・商品複合検索結果一覧ページのスタイルシートです。このファイルは必須で、いずれかの方法でスタイルを読み込まなくてはいけないようです。

私は、親テーマの同名ファイル(usces_cart.css)を子テーマにそっくりそのままコピーしました。

これで安心して大幅修正ができます!!

ヘッダー部 -Logo部分をテキストから画像へ-!

このテーマでは、Wordpressの機能だけに頼っていると、Logo部分を画像に変えることができないんですよね。。
で、ネット上でいろいろと検索し、探しまくりました。
どのページもなぁ~んとなくは書いてあるのですが、1~10までびっちり書いてあるものがなく、結構苦労しました。出来上がってみると大したことがなく、サクッとできちゃった場合、確かに詳しくは書かないかも・・。(笑)

一番最初にすることは、Logo部分に置きたい画像データを作成します。
私は画像データとして、表示画像サイズ(400px ✕ 90px)を作成しました。
Windowsでは必要ないのかもしれませんが、Mac(解像度が高いグラフィック)だと同サイズで画像を作成すると表示した時にガビガビとボケてしまうので、私はボケさせたくない画像はすべて倍角以上サイズで作成しています。

「header.php」の修正

さてと、Wordpress側の処理です。
壊した時に元に戻せなくなるので、「header.php」を親テーマからコピーしてきます。
※自信のある方は、そのまま親テーマのものを修正してもいいと思います。

●修正前・親テーマのheader.php(25行目)
<<?php echo $heading_tag; ?> class="site-title"><a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" title="<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>" rel="home"><?php bloginfo( ‘name’ ); ?></a></<?php echo $heading_tag; ?>>

●修正後・子テーマのheader.php(25行目)
<<?php echo $heading_tag; ?> class="site-title"><a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" title="<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>" rel="home"><img src="アップロードした画像ファイルの格納URL" width="400" height="90" alt="ALT文言" title="Title文言"></a></<?php echo $heading_tag; ?>>

「style.css」の修正

画像を倍角で作成しない場合は、修正の必要ありません。

●親テーマのstyle.css(506行目)
h1.site-title img,
div.site-title img {
width: 100%;
height: auto;
}

●子テーマのstyle.css
h1.site-title img,
div.site-title img {
width: 50%;  /* ロゴの横幅のパーセンテージの指定をする */
height: auto;  /* ロゴの横幅に合わせて等縮する */
}



OR

h1.site-title img,
div.site-title img {
width: 400px;  /* ロゴの横幅の大きさ指定をする */
height: 90px;  /* ロゴの高さの大きさ指定をする */

}


ヘッダー部 右側の編集 -検索枠・カートボタンから、住所・電話番号の表示へ変更-!

●header.php の変更

下記画像の赤枠の部分を修正すると、ヘッダー部 右側部分(検索枠・カートボタンなど)のデザイン変更が可能です。
私はこの部分を改定して、住所と電話番号(画像ファイル)を表示させることにし、元々ここに表示されていた検索枠・カートボタンは、ヘッダー部やサイドバーに表示するように変更しました。

※これも上記同様、子テーマにコピーした「header.php」を修正しました。

WordpressでHPを改変してみました! -Welcart-

ちょっと長くなってしまったので、今回はヘッダー部の修正のみで。
次回につづく・・・


facebook クレニオセラピー(頭蓋骨調整)Facebookページ(「いいね」お願いします♪)
facebook アディオ カイロプラクティック Facebookページ(「いいね」お願いします♪)
facebook 坂本 儀恵 Facebook (楽しい&美味しい情報満載 お友達募集中★)
LINE アディオLINE@ LINE ID: @miw3935y(友達追加で特典あります)

パソコン オンライン予約はこちら (予約専用TEL : 03-6806-2388)

クレニオセラピーを学びたい方へ<日本クレニオセラピー協会 -Japan Cranio Therapy Association>