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

FacebookやTwitterなどのSNSをWebマーケティングに利用する機会が増えています。

各SNSのアイコンを設置し、それぞれにリンクを設置しているウェブサイトも多いですね。

今回は、WordPressのテーマカスタマイザーにSNSアイコンの表示・非表示を切り替える機能を追加する方法をご紹介します。

ここでは、Facebook、Twitter、Instagram、Youtubeのアイコンを設置できるようにしてみます。

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

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

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

まずは、WordPressテーマでテーマカスタマイザーを利用できるようにします。

お使いのテーマですでにテーマカスタマイザーを有効にしている場合はこの手順は省略してください。

functions.phpを編集しますので、編集前に必ずバックアップを取っておいてください。

functions.phpは記述の仕方がまずかったりするとWordPressのダッシュボードが表示されなくなります。

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

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

functions.php

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

function theme_customize($wp_customize){

	//SNSアカウント設定

		//Facebook

		//Twitter

		//Instagram

		//Youtube

}

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

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

functions.php

/* テーマカスタマイザー
---------------------------------------------------------- */
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テーマによって各項目に設定されている値は違うと思いますので、いろいろ値を変えながら表示位置を調整してみてください。

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

「SNSアカウント設定」の項目を追加できたら、次は「SNSアカウント設定」内で設定する各SNSの項目を追加していきます。

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

functions.php

/* テーマカスタマイザー
---------------------------------------------------------- */
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の設定項目を追加することができました。

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

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

SNSアイコンを表示させたい箇所に下記を追加します。

PHP

<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>

スタイルはお好みで調整してください。