サロンのホームページ制作

WordPressで装飾を追加してみる

サロンのホームページでも使える感じの、装飾機能を追加してみました。

テーマカスタマイザーで、画像を最大5件登録できて、

それぞれ、見出しの背景として設定できるように。

スクリーンショット 2015-12-13 1.41.13

 

例えば、こんな感じ

もうフォント装飾。

まぁ、CSSで装飾できるレベルもありますが、

明らかに画像でしか表現できないような見出しもありますしね・・。

サンプルは、シンプルな感じですが、背景全体を画像にできるので、

古い本のようなテクスチャをつけてみたり、

デザイナーのスキルと気分次第でいろいろできます。

実装方法

 $wp_customize->add_setting( 'title_block_1' );
 $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'title_block_1', array(
     'label' => '装飾1', //設定ラベル
     'section' => 'headline_section', //セクションID
     'settings' => 'title_block_1', //セッティングID
     //'description' => '装飾1',
 ) ) );

こんな感じで、テーマカスタマイザーに登録をしておく。

これを、5つ作成

 

function get_title_block($num){
    $title_block = 'title_block_' . $num;
    return esc_url( get_theme_mod( $title_block ) );
}

それぞれを呼び出す関数を作成。

 

$i = 0;
while($i < 5){
    if( get_title_block( $i ) ){
        ?>
    h2.title_block_{
        background-image: url('') ;
        }
    <?php
     }; 
++$i;
};

CSSのほうでは、こんな感じで、get_title_block という関数を呼び出し。

 

 

 

背景も設定できるようにした

装飾を追加してみました。 メモを書きたいときとか。
装飾を追加してみました。 TIPS的にちょっとカッコよく

 

こちらは、もともとテーマカスタマイザーに登録した「テーマカラー」から、

背景パターンを生成するようにした。

装飾を追加してみました。 背景1 テーマカラーから自動取得した薄め
装飾を追加してみました。 背景2 テーマカラーから自動取得した濃いめ
装飾を追加してみました。 プレーンな感じ。あとで画像背景とか入れられるように

 

これらは、WordPressに入れたCKeditorから呼び出せる。

 スクリーンショット 2015-12-13 1.49.23スクリーンショット 2015-12-13 1.49.23

こんな機能もつけたよ、という、メモ程度に。

見出し
テキスト
こんなブログも読まれています
mautic is open source marketing automation