Stinger3 β版の先行公開とカスタマイズの方法のお知らせ

st3

この度、Stinger3 betaを限定公開しました。従来のStinger2のアドセンス1つで柔軟に対応するタイプには一区切りつけ、Stinge3としました。主に、スマートフォンへの最適化です。SEO効果は従来のものと変わりませんが、アクセス、アドセンス効果は上がるかと思います。既にカスタマイズされている方の適応方法も記載致します。変更点は以下の通りです。

スマートフォン表示の最適化

http://wp-stinger.com/demo/

縮小表示をやめ、PCとの表現をなるべく統一しました。
画像、Youtubeなどの自動縮小

アドセンスの拡大

上記により、アドセンスがさらに目立ちます。

iPadの表示最適化

iPadのレイアウトを修正しました。

Stinger3の注意点

スマートフォン用アドセンスの追加

スマートフォンへ適正化する為に、アドセンスのサイズを条件分岐しています。（初心者向けの為、レスポンシブではなく別途300×250pxのアドセンスをウィジェットで設定します。）アドセンスで、スマホ用に「300×250レクタングル」を別途取得。（今までのモノはPC用にそのままでOK）

WordPressの管理画面の「ウィジェット」に新しく「Googleアドセンスのスマホ用」があるので追記

以上で完了です。 ※新しくStingerを導入される方はヘッダー画像の取り扱いを注意して下さい。 http://wp-stinger.com/news/post-753/

既にStinger2をご利用の方へ

※現在のStinger2の最新版の利用として考えます。 ※必ず現在のテーマのバックアップを取ってから作業をして下さい。

smart.cssの変更

smart.cssもガンガンカスタマイズしている方は申し訳ありませんがStinger3のsmart.cssのソースを適宜修正してコピーペーストして下さい。CSSのセレクタ名の変更は特にありません。

functions.phpの追記

functions.phpの下の方の

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) )
register_sidebars(1,
    array(
    'name'=>'サイドバー1',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2" style="text-align:left;">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'Googleアドセンス用',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'Googleアドセンスのスマホ用width300',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

のように

register_sidebars(1,
    array(
    'name'=>'Googleアドセンスのスマホ用width300',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

を追加して下さい。

header.phpのviewpointの変更

<!---css切り替え--->
<?php
if(strpos($_SERVER['HTTP_USER_AGENT'],'ipod')!==false ||
strpos($_SERVER['HTTP_USER_AGENT'],'iPhone')!==false ||
strpos($_SERVER['HTTP_USER_AGENT'],'Windows Phone')!==false ||
strpos($_SERVER['HTTP_USER_AGENT'],'Android')!==false){
?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />
<?php
}else{
?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php
}
?>

上記の部分を

<!---css切り替え--->
<?php
if(strpos($_SERVER['HTTP_USER_AGENT'],'ipod')!==false ||
strpos($_SERVER['HTTP_USER_AGENT'],'iPhone')!==false ||
strpos($_SERVER['HTTP_USER_AGENT'],'Windows Phone')!==false ||
strpos($_SERVER['HTTP_USER_AGENT'],'Android')!==false){
?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />
<?php
}else{
?>

<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php
}
?>

に変更して下さい。

ad.phpの変更

ad.phpを以下の様に丸ごと変更して下さい。

<?php
if(strpos($_SERVER['HTTP_USER_AGENT'],'ipod')!==false ||
strpos($_SERVER['HTTP_USER_AGENT'],'iPhone')!==false ||
strpos($_SERVER['HTTP_USER_AGENT'],'Windows Phone')!==false ||
strpos($_SERVER['HTTP_USER_AGENT'],'Android')!==false){
?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(4) ) : else : ?>
<?php endif; ?>

<?php
}else{
?>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(3) ) : else : ?>
<?php endif; ?>

<?php
}
?>

以上で完了です。【注意】このままだと、記事の両サイドのスペースが少なめになります。新しいStingerでは

<div class="kizi">

<h1 class="entry-title">
<?php the_title(); ?></h1>
<?php the_content(); ?>

</div>

のようにclass="kizi"で囲むことで周りのpaddingに10pxのスペースを追加して見やすくさせています。また、このclass="kizi"の包まれている画像（img）やYoutube（iframe）のみスマートフォンサイズに最適化します。関連記事などの内容もclass="kizi"で囲むとサムネイルが拡大されるので、画像（img）やYoutube（iframe）を含まないコンテンツはclass="kizi02"で包むか、適宜、自身でカスタマイズして下さい。以上、全部ではありませんがカスタマイズされている方が3に対応したい場合の最低限の変更内容です。

まずはFacebookの限定公開ページにて β版を先行公開しています。
後日、一般公開致します。不備などあればご連絡下さいませ。

https://www.facebook.com/ENJILOG