Blog

WordPressのテーマカスタマイザーからSNSアイコンの表示・非表示を切り替える

2016.06.24 2017.03.01WordPress

FacebookやTwitterなどのSNSをWebマーケティングに利用する機会が増えています。各SNSのアイコンを設置し、それぞれにリンクを設置しているウェブサイトも多いですね。

今回は、WordPressのテーマカスタマイザーにSNSアイコンの表示・非表示を切り替える機能を追加する方法をご紹介します。ここでは、Facebook、Twitter、Instagram、Youtubeのアイコンを設置できるようにしてみます。

なお、アイコンにはWebアイコンフォント「Font Awesome」を使いますが、お好みで画像を使ったり「IcoMoon」などを利用して自分でアイコンフォントを作成してもいいかと思います。

WordPressテーマでテーマカスタマイザーを使えるようにする

まずは、WordPressテーマでテーマカスタマイザーを利用できるようにします。お使いのテーマですでにテーマカスタマイザーを有効にしている場合はこの手順は省略してください。

functions.phpを編集しますので、編集前に必ずバックアップを取っておいてください。functions.phpは記述の仕方がまずかったりするとWordPressのダッシュボードが表示されなくなります。

万が一そうなったときに復旧できるように、現在の状態のfunctions.phpをサーバーからダウンロードしておきましょう。

functions.phpに、以下の記述を追加します。

/* テーマカスタマイザー
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );

function theme_customize($wp_customize){

	//SNSアカウント設定

		//Facebook

		//Twitter

		//Instagram

		//Youtube

}

テーマカスタマイザーにSNSアカウント設定用の項目を追加する

次に、先ほど記述した内容に下記のように追記して、テーマカスタマイザーにSNSアカウント設定用の項目(セクション)を追加します。

/* テーマカスタマイザー
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );

function theme_customize($wp_customize){

	//SNSアカウント設定
	$wp_customize->add_section( 'sns_section', array(
		'title' => 'SNSアカウント設定',
		'priority' => 160,
		'description' => 'SNSアカウントをお持ちの場合は以下に入力してください。',
	));

		//Facebook

		//Twitter

		//Instagram

		//Youtube

}

これでWordPressダッシュボードの「外観」→「カスタマイズ」と進んだときに「SNSアカウント設定」の項目が追加されます。ちなみに「priority」の値を変えると「SNSアカウント設定」項目の表示順(上下)を変えることができます。

値が小さいほど上に、大きいほど下に表示されるようになります。お使いのWordPressテーマによって各項目に設定されている値は違うと思いますので、いろいろ値を変えながら表示位置を調整してみてください。

20160623-1

各SNSの設定項目を追加する

「SNSアカウント設定」の項目を追加できたら、次は「SNSアカウント設定」内で設定する各SNSの項目を追加していきます。ここでは、各SNSアイコンの表示・非表示を切り替えるためのチェックボックスと、各SNSのURLを入力するためのテキスト入力欄を追加していきます。

/* テーマカスタマイザー
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );

function theme_customize($wp_customize){

	//SNSアカウント設定
	$wp_customize->add_section( 'sns_section', array(
		'title' => 'SNSアカウント設定',
		'priority' => 160,
		'description' => 'SNSアカウントをお持ちの場合は以下に入力してください。',
	));

		//Facebook
		$wp_customize->add_setting( 'facebook_display', array(
			'type'  => 'option',
		));
		$wp_customize->add_control( 'facebook_display', array(
			'section' => 'sns_section',
			'settings' => 'facebook_display',
			'label' => 'Facebookアイコンを表示する',
			'type' => 'checkbox'
		));
		$wp_customize->add_setting( 'facebook_url', array(
			'type'  => 'option',
		));
		$wp_customize->add_control( 'facebook_url', array(
			'section' => 'sns_section',
			'settings' => 'facebook_url',
			'label' => 'FacebookアカウントのURL',
			'type' => 'text'
		));

		//Twitter
		$wp_customize->add_setting( 'twitter_display', array(
			'type'  => 'option',
		));
		$wp_customize->add_control( 'twitter_display', array(
			'section' => 'sns_section',
			'settings' => 'twitter_display',
			'label' => 'Twitterアイコンを表示する',
			'type' => 'checkbox'
		));
		$wp_customize->add_setting( 'twitter_url', array(
			'type'  => 'option',
		));
		$wp_customize->add_control( 'twitter_url', array(
			'section' => 'sns_section',
			'settings' => 'twitter_url',
			'label' => 'TwitterアカウントのURL',
			'type' => 'text'
		));

		//Instagram
		$wp_customize->add_setting( 'instagram_display', array(
			'type'  => 'option',
		));
		$wp_customize->add_control( 'instagram_display', array(
			'section' => 'sns_section',
			'settings' => 'instagram_display',
			'label' => 'Instagramアイコンを表示する',
			'type' => 'checkbox'
		));
		$wp_customize->add_setting( 'instagram_url', array(
			'type'  => 'option',
		));
		$wp_customize->add_control( 'instagram_url', array(
			'section' => 'sns_section',
			'settings' => 'instagram_url',
			'label' => 'InstagramアカウントのURL',
			'type' => 'text'
		));

		//Youtube
		$wp_customize->add_setting( 'youtube_display', array(
			'type'  => 'option',
		));
		$wp_customize->add_control( 'youtube_display', array(
			'section' => 'sns_section',
			'settings' => 'youtube_display',
			'label' => 'YouTubeアイコンを表示する',
			'type' => 'checkbox'
		));
		$wp_customize->add_setting( 'youtube_url', array(
			'type'  => 'option',
		));
		$wp_customize->add_control( 'youtube_url', array(
			'section' => 'sns_section',
			'settings' => 'youtube_url',
			'label' => 'YouTubeアカウントのURL',
			'type' => 'text'
		));

}

これで、各SNSの設定項目を追加することができました。

20160623-2

SNSアイコンを表示させる箇所のテンプレートファイルを編集する

最後にSNSアイコンを表示させるためにWordPressテーマのテンプレートファイルを編集していきます。SNSアイコンを表示させたい箇所に下記を追加します。

<div class="sns">
	<ul>

		<?php
			$facebook = get_option('facebook_display');

			if($facebook) {
				echo'<li><a href="' . get_option('facebook_url') . '" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i>Facebook</a></li>';
			}
			else {
				echo '';
			}
		?>

		<?php
			$twitter = get_option('twitter_display');

			if($twitter) {
				echo'<li><a href="' . get_option('twitter_url') . '" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i>Twitter</a></li>';
			}
			else {
				echo '';
			}
		?>

		<?php
			$instagram = get_option('instagram_display');

			if($instagram) {
				echo'<li><a href="' . get_option('instagram_url') . '" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i>Instagram</a></li>';
			}
			else {
				echo '';
			}
		?>

		<?php
			$youtube = get_option('youtube_display');

			if($youtube) {
				echo'<li><a href="' . get_option('youtube_url') . '" target="_blank"><i class="fa fa-youtube" aria-hidden="true"></i>Youtube</a></li>';
			}
			else {
				echo '';
			}
		?>

	</ul>
</div>

スタイルはお好みで調整してください。以上が、WordPressのテーマカスタマイザーからSNSアイコンの表示・非表示を切り替える機能を追加する方法です。

SNSアイコンの部分のみ別パーツ化して他のテンプレートファイルから読み込むような構成にしておくと、複数の箇所に設置する場合に便利かもしれません。(参照:WordPressテーマのテンプレートファイルで別のテンプレートファイルを読み込む方法)

参考URL
ワードプレスのテーマ、カスタマイズ画面にオリジナル要素を追加する。
WordPress テーマカスタマイザーの使い方

photo credit: Patrick Zukowski via photopin (license)

Author: 柴田竹思

ベトナムと日本のに拠点生活Webディベロッパー。国内外のSOHO/フリーランスの方のウェブサイト制作から企業の大規模案件まで幅広く携わっています。