条件分岐できる便利なカスタムテキストウィジェットの作り方
日付
カテゴリー
カスタマイズ
WordPressが標準で用意しているテキストウィジェットは非常に便利ですが、表示ページを自在に設定できた方が良いと思いますので、簡単に作成できるオリジナルテキストウィジェットの追加コードを紹介します。
デバイスごとの条件分岐には、Wordpress関数「wp_is_mobile」でも可能ですが、タブレットなどの条件も入れることを検討し、外部ソースの「Mobile Detect」を使って作成しますので、面倒な作業は一切無しで紹介します。
まずは「Mobile Detect」の下準備
自分で条件分岐の関数を既に用意している場合は、不要ですので飛ばしてください。
まずはリンク先で「Mobile Detect」をダウンロードして、任意のディレクトリにアップロードします。これはどこでも構いません。
あとは次のコードを貼り付けておきます。
/* * Mobile Detect * http://mobiledetect.net/ */ require_once( 'path/to/Mobile_Detect.php' ); $detect = new Mobile_Detect(); if( ! defined( 'IS_MOBILE' ) ) define( 'IS_MOBILE', $detect->isMobile() ); if( ! defined( 'IS_TABLET' ) ) define( 'IS_TABLET', $detect->isTablet() ); if( ! defined( 'IS_IOS' ) ) define( 'IS_IOS', $detect->isiOS() ); if( ! defined( 'IS_ANDROIDOS' ) ) define( 'IS_ANDROIDOS', $detect->isAndroidOS() );
これで準備完了です。
使う予定はありませんが、このようにしておけば「iOSユーザー」や「Androidユーザー」といった条件も設けることが出来ます。
では、次はウィジェットの作成です。
ウィジェットの作成
表示条件として、「端末（全て・PCのみ・モバイル・タブレットのみ・スマホのみ）の選択」「ページの選択」「非表示にする投稿タイプ」を設けていますが、自由にカスタマイズすることが出来る筈ですから、そこは自分で編集してください。
// ウィジェット「Optimizer Text」
class OptimizerTextarea extends WP_Widget {
function OptimizerTextarea() {
parent::WP_Widget( false, $name = 'Optimizer Text テキスト 表示条件指定可能' );
}
function widget( $args, $instance ) {
extract( $args );
// デバイス設定
$opt_textarea_display_device = $instance[ 'opt_textarea_display_device' ];
// デバイス分岐
if( $opt_textarea_display_device == 'opt_textarea_display_any' ) {
} elseif( ! IS_MOBILE && $opt_textarea_display_device == 'opt_textarea_display_pc' ) {
} elseif( IS_MOBILE && $opt_textarea_display_device == 'opt_textarea_display_mobile' ) {
} elseif( IS_TABLET && $opt_textarea_display_device == 'opt_textarea_display_tablet' ) {
} elseif( ( IS_MOBILE && ! IS_TABLET ) && $opt_textarea_display_device == 'opt_textarea_display_phone' ) {
} else {
return;
}
// 標準設定
$title_text = strip_tags( $instance[ 'title_text' ] );
$title_display = strip_tags( $instance[ 'title_display' ] );
$opt_textarea = $instance[ 'opt_textarea' ];
// 優先設定
$opt_textarea_display_home = $instance[ 'opt_textarea_display_home' ];
$opt_textarea_display_front = $instance[ 'opt_textarea_display_front' ];
// 全般設定
$opt_textarea_display_archive = $instance[ 'opt_textarea_display_archive' ];
$opt_textarea_display_singular = $instance[ 'opt_textarea_display_singular' ];
// ページ分岐
if( $opt_textarea_display_front && ( ! is_home() && is_front_page() ) ) {
} elseif( $opt_textarea_display_home && is_home() ) {
} elseif( $opt_textarea_display_archive && is_archive() ) {
} elseif( $opt_textarea_display_singular && is_singular() ) {
} else {
return;
}
// ポストタイプ
if( is_singular() ) {
global $post;
$post_types = get_post_types();
foreach( $post_types as $post_type => $name ) {
if( 'opt_textarea_display_' . $post->post_type == $instance[ 'opt_textarea_display_' . $post_type ] ) {
return;
}
}
}
$title_text = ( $title_text ? $title_text : '' );
$opt_textarea = ( $opt_textarea ? $opt_textarea : '' );
// ウィジェットの出力
echo $before_widget;
if( ! $title_display )
echo $before_title . '<span class="title-opt-textarea">'. $title_text . '</span>' . $after_title;
echo $opt_textarea;
echo $after_widget;
}
function update( $new_instance, $old_instance ) {
return $new_instance;
}
function form( $instance ) {
$post_types = get_post_types();
$defaults = array(
'title_text' => '',
'title_display' => false,
'opt_textarea' => '',
'opt_textarea_display_home' => false,
'opt_textarea_display_front' => false,
'opt_textarea_display_archive' => false,
'opt_textarea_display_singular' => false,
'opt_textarea_display_device' => 'opt_textarea_display_any'
);
$instance = wp_parse_args( ( array ) $instance, $defaults );
$title_text = strip_tags( $instance[ 'title_text' ] );
$title_display = strip_tags( $instance[ 'title_display' ] );
$opt_textarea = $instance[ 'opt_textarea' ];
// 優先設定
$opt_textarea_display_home = $instance[ 'opt_textarea_display_home' ];
$opt_textarea_display_front = $instance[ 'opt_textarea_display_front' ];
// 全般設定
$opt_textarea_display_archive = $instance[ 'opt_textarea_display_archive' ];
$opt_textarea_display_singular = $instance[ 'opt_textarea_display_singular' ];
// ポストタイプ
foreach( $post_types as $post_type ) {
$opt_textarea_display[ $post_type ] = $instance[ 'opt_textarea_display_' . $post_type ];
}
// デバイス設定
$opt_textarea_display_device = $instance[ 'opt_textarea_display_device' ];
?>
<p>
<label for="<?php echo $this->get_field_id( 'title_text' ); ?>">
<strong>タイトル</strong>
</label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title_text' ); ?>" name="<?php echo $this->get_field_name( 'title_text' ); ?>" type="text" value="<?php echo $title_text; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'title_display' ); ?>">
<strong>タイトルを非表示（ヘッダー左上・ヘッダー右上の場合はチェック不要）</strong>
</label>
<input type="checkbox" id="<?php echo $this->get_field_id( 'title_display' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'title_display' ); ?>" value="title_display" <?php checked( $title_display, 'title_display' ); ?> style="width:0;"/>
</p>
<p>
<label for="<?php echo $this->get_field_id( 'opt_textarea' ); ?>">
<strong>出力するテキスト</strong>
</label>
<textarea class="widefat" id="<?php echo $this->get_field_id( 'opt_textarea' ); ?>" name="<?php echo $this->get_field_name( 'opt_textarea' ); ?>" rows="10" ><?php echo $opt_textarea; ?></textarea>
</p>
<p>
<label>
<strong>表示するページの優先設定</strong>
</label><br>
<input type="checkbox" id="<?php echo $this->get_field_id( 'opt_textarea_display_home' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'opt_textarea_display_home' ); ?>" value="opt_textarea_display_home" <?php checked( $opt_textarea_display_home, 'opt_textarea_display_home' ); ?> style="width:0;"/><span>ホーム</span><br>
<input type="checkbox" id="<?php echo $this->get_field_id( 'opt_textarea_display_front' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'opt_textarea_display_front' ); ?>" value="opt_textarea_display_front" <?php checked( $opt_textarea_display_front, 'opt_textarea_display_front' ); ?> style="width:0;"/><span>フロントページ</span><br>
<label>
<strong>表示する全般ページを選択</strong>
</label><br>
<input type="checkbox" id="<?php echo $this->get_field_id( 'opt_textarea_display_archive' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'opt_textarea_display_archive' ); ?>" value="opt_textarea_display_archive" <?php checked( $opt_textarea_display_archive, 'opt_textarea_display_archive' ); ?> style="width:0;"/><span>アーカイブページ全般</span><br>
<input type="checkbox" id="<?php echo $this->get_field_id( 'opt_textarea_display_singular' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'opt_textarea_display_singular' ); ?>" value="opt_textarea_display_singular" <?php checked( $opt_textarea_display_singular, 'opt_textarea_display_singular' ); ?> style="width:0;"/><span>コンテンツページ全般</span><br>
<label>
<strong>※ 非表示のページにチェック</strong>
</label><br>
<input type="checkbox" id="<?php echo $this->get_field_id( 'opt_textarea_display_post' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'opt_textarea_display_post' ); ?>" value="opt_textarea_display_post" <?php checked( $opt_textarea_display[ 'post' ], 'opt_textarea_display_post' ); ?> style="width:0;"/><span>投稿ページ</span><br>
<input type="checkbox" id="<?php echo $this->get_field_id( 'opt_textarea_display_page' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'opt_textarea_display_page' ); ?>" value="opt_textarea_display_page" <?php checked( $opt_textarea_display[ 'page' ], 'opt_textarea_display_page' ); ?> style="width:0;"/><span>固定ページ</span><br>
<?php
foreach( $post_types as $post_type ) { if( ! in_array( $post_type, array( 'post', 'page' ) ) ) { ?>
<input type="checkbox" id="<?php echo $this->get_field_id( 'opt_textarea_display_' . $post_type ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'opt_textarea_display_' . $post_type ); ?>" value="opt_textarea_display_<?php echo $post_type; ?>" <?php checked( $opt_textarea_display[ $post_type ], 'opt_textarea_display_' . $post_type ); ?> style="width:0;"/><span><?php echo $post_type; ?></span><br>
<?php } }
?>
</p>
<p>
<label>
<strong>表示する端末を選択</strong>
</label><br>
<input type="radio" id="<?php echo $this->get_field_id( 'opt_textarea_display_device' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'opt_textarea_display_device' ); ?>" value="opt_textarea_display_any" <?php checked( $opt_textarea_display_device, 'opt_textarea_display_any' ); ?> style="width:0;"/><span>全端末（PC・モバイル）</span><br>
<input type="radio" id="<?php echo $this->get_field_id( 'opt_textarea_display_device' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'opt_textarea_display_device' ); ?>" value="opt_textarea_display_pc" <?php checked( $opt_textarea_display_device, 'opt_textarea_display_pc' ); ?> style="width:0;"/><span>パソコンのみ ※スマホ・タブレットには表示されません </span><br>
<input type="radio" id="<?php echo $this->get_field_id( 'opt_textarea_display_device' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'opt_textarea_display_device' ); ?>" value="opt_textarea_display_mobile" <?php checked( $opt_textarea_display_device, 'opt_textarea_display_mobile' ); ?> style="width:0;"/><span>モバイルのみ ※パソコンには表示されません。</span><br>
<input type="radio" id="<?php echo $this->get_field_id( 'opt_textarea_display_device' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'opt_textarea_display_device' ); ?>" value="opt_textarea_display_tablet" <?php checked( $opt_textarea_display_device, 'opt_textarea_display_tablet' ); ?> style="width:0;"/><span>タブレット ※スマホには表示されません</span><br>
<input type="radio" id="<?php echo $this->get_field_id( 'opt_textarea_display_device' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'opt_textarea_display_device' ); ?>" value="opt_textarea_display_phone" <?php checked( $opt_textarea_display_device, 'opt_textarea_display_phone' ); ?> style="width:0;"/><span>スマホのみ ※タブレットには表示されません</span><br>
</p>
<?php }
}
実は条件分岐のための「Mobile Detect」を導入して、コードを「functions.php」から読み込むファイルにコピペするだけで使えるようになる筈です。
完成したウィジェット
設定項目が増えるとちょっと縦長になってしまいますが、まぁ仕方ありません。
出力するものはWordpressに標準で備わっているテキストウィジェットと変わりませんので、好きなものをHTMLタグで出力してください。
