WordPressの初心者【CSS&PHP】

#はじめに
本記事ではWordPress初心者の私がWordPressサイトのテーマをカスタマイズする手順を紹介します。
前回のEコマース設定でネットショップ自体が運営できる状態になっていますが、ストックテーマのままだと集客しにくいので、今回はCSSやPHPでストックテーマから独自テーマに変身させていきます。

CSSを触ったことない方にはCSSを学習してからこの手順を進めるのがおすすめです。

では、Let`s WordPress！！！！

##1. CSS

サイドバーの外観タグにカーソルを移動して、「カスタマイズ」を選択します。

カスタマイズ画面では背景やメニューなどの設定を変更することができます。
記事のトピック外になってしまうので、もしお時間があれば使ってみていただければと思います。

追加CSSを選択したらCSSエディターが表示されます。
ここでCSSを入力すると右の画面にすぐ反映されるのでとても使いやすいです。

まずはヘッダーの見た目を変えましょう。

.mini_cart_item a {
	color: #D48166 !important;
}
.mini_cart_item a:hover {
	color: #d67c58 !important;
}
.amount-cart, span.count, .cart-contents span.count {
	background: white;
	color: #373A36;
}
.amount-cart::before {
	border-right-color: white;
}
.site-header {
	background: #D48166;
}
.site-description {
	color: white;
}
.site-header a, a.cart-contents i, .header-my-account a {
	color: white;
}

上記のCSSを入力したらヘッダーの部品を今回のサイトのイメージカラーに変えました。
うん、検索バーの見た目まだ気になりますね。

.header-search-form {
	border: none;
	border-bottom: 1px solid white;
	background: transparent;
}
.header-search-form select{
	background: transparent;
	border: none;
	color: white;
}
.header-search-form select>option{
	color: black;
}
.header-search-input {
	color: #373A36;
	background: transparent;
}
.header-search-input::placeholder {
	color: white;
}
button.header-search-button {
	color: white;
	background: transparent;
	border: none;
}

さらにこのCSSを追加したら検索バーをミニマルデザインに変えられました。
CSSの追加が完了したらエディターの右上の公開ボタンを押下すればサイトに反映されます。

CSSを追加する手順はこれだけです。

ちなみに、私のサイトのCSS追加のビフォーアフターはこんな漢字です。

###商品ページ
追加前

追加後

###商品詳細ページ
追加前

追加後

##2. PHP
さて、次はPHPを使って画面要素を追加します。
WordPressの「フック」機能はWordPressの構築者にとって非常に重要な機能です。
「フック」を利用すればテーマやプラグインを改造しなくても欲しい機能を追加できます。
そしてWooCommerceのプラグインには「フック」が用意されています。
詳しくはこちらのドキュメントを参考してください。

今回はわかりやすくするように例一つを紹介します。

カート画面を見てみると注意事項など全く表示されていないですね。
「在庫確保」の注意事項を追加してみましょう。

サイドバーの外観タグの「テーマエディター」を選択し、「functions.php」を選択します。
functions.phpはテーマ特有の関数のファイルです。対象テーマが有効であればここの関数が実行されます。

functions.php

function cart_page_custom_text() {
 
    $message='<p class="cart-warning" align="justify">現時点では商品の在庫が確保されていませんのでご注意ください。</p>';
 
    echo $message;
}

まずはファイルの最後に関数を作成します。
このcart_page_custom_textが実行されたら「現時点では商品の在庫が確保されていませんのでご注意ください。」の要素がechoされます。

次に対象のプラグインにフックを追加します。

functions.php

add_action('woocommerce_before_cart_contents', 'cart_page_custom_text');

アクションフックを利用してWooCommerceのカートコンテンツの前にcart_page_custom_textを插入します。

画面をもう一度見てみると......
お！在庫確保の通知が表示されるようになっていますね！

ひと通りにサイトの設定をカスタマイズしました。
これで基本設定や構築も終わっていますのでショップとして運営できる状態です。

##終わりに
前の記事と合わせて、WordPressのショップ構築手順でした。
皆さんもご自身のネットショップを作ってみてはいかがでしょうか？

もし気になる点や知りたいことがありましたらコメントで教えていただければ嬉しいです！