Stinger8 カスタマイズ事例
この記事のURLとタイトルをコピーする
リリースされてからかなり経つStinger8ですが、これまでにやってきたカスタマイズをまとめてみようと思います。
Stingerシリーズは、Stinger3からいろいろ使用させていただいてます。
当時は、子テーマを使うことなどなく直接、テーマを直接カスタマイズしていましたね。
今から考えると随分と大胆なことをやっていたなと思いますが・・・
Stinger8を子テーマを使ってカスタマイズした事例をいろいろと紹介させていただきます。
目 次
ヘッダーにお問い合わせを表示する
上記は、Stinger8のノーマルヘッダーです。
タイトルだけが左側にあるのですが、右側にお問い合わせを表示させたいと思います。
上記とは違うサイトですが、ヘッダーにお問い合わせを表示してみました。
子テーマをカスタマイズしてみました。
参考にしたのは、Stinger PLus 2のソースを流用しましたが、スタイルシートの加減でちょっとStinger PLus 2より中央に寄ってる感じですが・・・
上記は、Stinger PLus 2のキャプチャです。
ちょっとStinger8の方がちょっと中央に寄ってる感じがしますね。
このカスタマイズは、header.phpをカスタマイズします。
Stinger PLus 2のようにウィジェットに入れずにheader.phpに直接書き込んでいます。
ちょっと工夫したらウィジェットにできるかもしれませんね
下記にソースの違いを表示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* bodyからタイトルまで */ <body <?php body_class(); ?> > <div id="st-ami"> <div id="wrapper"> <div id="wrapper-in"> <header> <div id="headbox-bg"> <div class="clearfix" id="headbox"> <?php get_template_part( 'st-accordion-menu' ); //アコーディオンメニュー ?> <div id="header-l"> <!-- ロゴ又はブログ名 --> <p class="sitename"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php echo esc_attr( get_bloginfo( 'name' ) ); ?> </a> </p> <!-- ロゴ又はブログ名ここまで --> <!-- キャプション --> <?php if ( is_front_page() ) { ?> <h1 class="descr"> <?php bloginfo( 'description' ); ?> </h1> <?php } else { ?> <p class="descr"> <?php bloginfo( 'description' ); ?> </p> <?php } ?> </div><!-- /#header-l --> </div><!-- /#headbox-bg --> |
上記がノーマルのソースですが、Stinger PLus 2を参考に下記のようにカスタマイズしてみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* bodyからタイトルまで */ <body <?php body_class(); ?> > <div id="st-ami"> <div id="wrapper"> <div id="wrapper-in"> <header> <div id="headbox-bg"> <div class="clearfix" id="headbox"> <?php get_template_part( 'st-accordion-menu' ); //アコーディオンメニュー ?> <div id="header-l"> <!-- ロゴ又はブログ名 --> <p class="sitename"> <a href="http://social908.com/normal/"><img src="http://social908.com/normal/wp-content/themes/stinger8-child/image/header_logo.png" alt="くまはちLAB" width="463" height="147" /></a> </p> <!-- ロゴ又はブログ名ここまで --> <!-- キャプション --> <?php if ( is_front_page() ) { ?> <h1 class="descr"> <?php bloginfo( 'description' ); ?> </h1> <?php } else { ?> <p class="descr"> <?php bloginfo( 'description' ); ?> </p> <?php } ?> </div><!-- /#header-l --> <div id="header-r" style="text-align: center;">ここに記述する </div><!-- /#header-r --> </div><!-- /#headbox-bg --> |
28行目と29行目が追加されただけのことですが・・・
header.phpを編集する場合に文字コードがちゃんとUTF-8であることを確認しておいてください。
Windowsの場合によくShift-JISになってしまってる場合があるので・・・
ヘッダー画像をスライダーに変更
次はヘッダーカスタマイズつながりでヘッダー画像をスライダーに変更してみました。
スライダーが表示されるのはトップページだけですが、詳しい内容は下記の記事を参考にしてください。
MetaSliderというプラグインを使って実現しています。
ソーシャルブックマークをLIONBLOG風に変更
ノーマルのStinger8のソーシャルブックマークですが、今はもうないGoogle+のブックマークがあったり2段になっているとかあまり筆者の好みではありません。これを好みのLIONBLOGのようなソーシャルブックマークに改造してカウントを表示できるようにしたいと思います。
上記は、Stinger8のカスタマイズした記事のヘッダー部分です。
表示されているソーシャルブックマークがLIONBLOG風というかパクったというかそのソーシャルブックマークです。
また、トップページにもソーシャルブックマークが表示されるのでそれはhome.phpをカスタマイズして非表示にしました。
主にカスタマイズするのは、sns.phpになります。
また、Twitterのカウント数を表示させるのは下記の記事を参考にしてください。
sns.phpのソースを比較してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<?php /** * 投稿ページのSNSボタン */ $url_encode=urlencode(get_permalink()); $title_encode=urlencode(get_the_title()); if(function_exists('scc_get_share_twitter')){ $plug = "smanone"; }else{ $plug = ""; } ?> <div class="sns"> <ul class="clearfix"> <!--ツイートボタン--> <li class="twitter"> <a onclick="window.open('//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton', '', 'width=500,height=450'); return false;"><i class="fa fa-twitter"></i><span class="snstext <?php echo $plug; ?>" >Twitter</span><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()=='0')?'<span class="snstext pcnone" >Twitter</span>':'<span class="snscount">'.scc_get_share_twitter().'</span>'; ?></a> </li> <!--Facebookボタン--> <li class="facebook"> <a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank"><i class="fa fa-facebook"></i><span class="snstext <?php echo $plug; ?>" >Facebook</span> <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'<span class="snstext pcnone" >Facebook</span>':'<span class="snscount">'.scc_get_share_facebook().'</span>'; ?></a> </li> <!--Google+1ボタン--> <li class="googleplus"> <a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" target="_blank"><i class="fa fa-google-plus"></i><span class="snstext <?php echo $plug; ?>" >Google+</span><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'<span class="snstext pcnone" >Google+</span>':'<span class="snscount">'.scc_get_share_gplus().'</span>'; ?></a> </li> <!--ポケットボタン--> <li class="pocket"> <a onclick="window.open('//getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>', '', 'width=500,height=350'); return false;"><i class="fa fa-get-pocket"></i><span class="snstext <?php echo $plug; ?>" >Pocket</span><?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'<span class="snstext pcnone" >Pocket</span>':'<span class="snscount">'.scc_get_share_pocket().'</span>'; ?></a></li> <!--はてブボタン--> <li class="hatebu"> <a href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php the_title(); ?>"><span style="font-weight:bold" class="fa-hatena">B!</span><span class="snstext <?php echo $plug; ?>" >はてブ</span> <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'<span class="snstext pcnone" >はてブ</span>':'<span class="snscount"><span class="hatebno">'.scc_get_share_hatebu().'</span></span>'; ?></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </li> <!--LINEボタン--> <li class="line"> <a href="//line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><i class="fa fa-comment" aria-hidden="true"></i><span class="snstext" >LINE</span></a> </li> </ul> </div> |
上記がノーマルなsns.phpで下記がカスタマイズ後のソースになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<?php if ( ( is_single() && (trim( $GLOBALS["stdata12"] ) === '') ) || ( is_page() && (trim( $GLOBALS["stdata69"]) ) !== '') ) { if ( trim( $GLOBALS["stdata25"] ) !== '' ) { //Twitterアカウント $twitter_name = '&via='.esc_attr( $GLOBALS["stdata25"] ); }else{ $twitter_name = ''; } if ( trim( $GLOBALS["stdata118"] ) !== '' ) { //Twitterハッシュタグ $twitter_tag = '&hashtags='.esc_attr( $GLOBALS["stdata118"] ); }else{ $twitter_tag = ''; } $url_encode=urlencode(get_permalink()); $title_encode=urlencode(get_the_title()); if(function_exists('scc_get_share_twitter')){ $plug = "smanone"; }else{ $plug = ""; } ?> <ul class="socialList" style="list-style-type:none; text-align: center;"> <!--ツイートボタン--> <li class="socialList__item"> <a class="socialList__link icon-twitter" style="text-decoration: none;" onclick="window.open('//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton', '', 'width=500,height=450'); return false;"><i class="fab fa-twitter-square"></i><br /><span class="snstext <?php echo $plug; ?>" >Twitter</span><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()=='0')?'<span class="snstext pcnone" >Twitter</span>':'<span class="snscount">'.scc_get_share_twitter().'</span>'; ?></a> </li> <!--Facebookボタン--> <li class="socialList__item"> <a class="socialList__link icon-facebook" data-layout="button_count" style="text-decoration: none;" href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank"><i class="fab fa-facebook"></i><br /><span class="snstext <?php echo $plug; ?>" >Facebook</span> </a> </li> <!--ポケットボタン--> <li class="socialList__item"> <a class="socialList__link icon-pocket" data-pocket-count="horizontal" data-layout="button_count" onclick="window.open('//getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>', '', 'width=500,height=350'); return false;"><i class="fab fa-get-pocket"></i><br /><span class="snstext <?php echo $plug; ?>" >Pocket</span><?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'<span class="snstext pcnone" >Pocket</span>':'<span class="snscount">'.scc_get_share_pocket().'</span>'; ?></a></li> <!--はてブボタン--> <li class="socialList__item"> <a class="socialList__link icon-hatebu" style="text-decoration: none;" href="//b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-layout="touch-counter" title="<?php the_title(); ?>"><span style="font-weight:bold" class="fa-hatena">B!</span><br /><span class="snstext <?php echo $plug; ?>" >はてブ</span> <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'<span class="snstext pcnone" >はてブ</span>':'<span class="snscount"><span class="hatebno">'.scc_get_share_hatebu().'</span></span>'; ?></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </li> <!--LINEボタン--> <li class="socialList__item"> <a class="socialList__link icon-line" style="text-decoration: none;" href="//line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><i class="fab fa-line"></i><br /><span class="snstext" >LINE</span></a> </li> <!--FEEDLYボタン--> <li class="socialList__item"> <a class="socialList__link icon-feedly" style="text-decoration: none;" href='https://feedly.com/i/subscription/feed%2Fhttp%3A%2F%2Fsocial908.com%2Fnature%2Ffeed%2F' target='blank' rel="noopener"><i class="fas fa-rss-square"></i><br /><span class="snstext <?php echo $plug; ?>" >FEEDLY</span></a> </li> </ul> <?php } |
下記にスタイルシートの変更部分を表示します。
カスタマイザーにある「CSSを編集」というところにコピペしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
/* Jetpack SNS icon */ @media screen and (-webkit-min-device-pixel-ratio:0) { .sd-social-icon .sd-content ul li a.share-custom-hatena-bookmark { top:10px !important; background-position:4px !important; } } .sd-social-icon .sd-content ul li a.share-custom- { background-color: #00A4DE !important; } .sd-social-icon .sd-content ul li a.share-custom-line{ background-color: #00C300 !important; } .sd-social-icon .sd-content ul li[class*=share-] a.sd-button.share-custom{ top: 10px !important; background-position:4px !important;} .sd-social-icon .sd-content ul li a.share-custom-feedly { background-color: #6CC655 !important; } .header_Top {background:#f4f4f4 !important;} .headerTop_description { position: relative; top: 7px; display: block; margin: 0; padding: 7px 20px calc(7px + 7px) 0; width: 1000px; line-height: 1.0em; } .headerTop_description {overflow: hidden; padding: 12px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;} .headerTop_description {position: relative; float: left; width: 65%; font-size:10px !important;} .header_nav { position: relative; top: 7px; display: block; margin: 0; padding: 7px 20px calc(7px + 7px) 0; width: 1000px; line-height: 1.0em; } .header_nav {position: relative; float: right; width: 35%; text-align: right; font-size:10px !important;} .socialList { display: flex; justify-content: flex-end; flex-wrap:wrap; width:100%; margin-bottom:60px; !important } .socialList__item { flex-grow: 1; height:50px; line-height:50px; min-width:90px; text-align:center; !important } .socialList__link { display:block; color:#ffffff; } .socialList__link::before{ font-size:2.6rem; display:block; transition: ease-in-out .2s; } .socialList__link:hover::before{ background:#ffffff; transform: scale(1.2); box-shadow:1px 1px 4px 0px rgba(0,0,0,0.15); } .socialList__link.icon-facebook{background:#3B5998;} .socialList__link.icon-facebook:hover::before{color:#3B5998;} .socialList__link.icon-twitter{background:#00B0ED;} .socialList__link.icon-twitter:hover::before{color:#00B0ED;} .socialList__link.icon-google{background:#DF4A32;} .socialList__link.icon-google:hover::before{color:#DF4A32;} .socialList__link.icon-hatebu{background:#008FDE;} .socialList__link.icon-hatebu:hover::before{color:#008FDE;} .socialList__link.icon-pocket{background:#EB4654;} .socialList__link.icon-pocket:hover::before{color:#EB4654;} .socialList__link.icon-line{background:#00C300;} .socialList__link.icon-line:hover::before{color:#00C300;} .socialList__link.icon-feedly{background:#7ac440;} .socialList__link.icon-feedly:hover::before{color:#5bb640;} |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存