【STINGER PLUS①】ヘッダー画像を記事で分割して表示するカスタマイズ方法
作成日
更新日 2018/03/28
Ads by Google
こんにちは！Tamakoです！
みなさんwordPressのテーマ、STINGERを知っていますか？
wordPressを触る人なら必ずといっていいほど耳にしたことがあるかも。
エンジログのenjiさんが作成された、SEOに強い無料のワードプレステーマです。
このサイトもSTINGERシリーズの、STINGER7をカスタマイズして作られているんですよ♪
特にSTINGER PLUSは、歴代のSTINGERの中でも飛びきりすごくて、phpがわからなくても、WEBのことを知らなくても、簡単にサイトの調整できてしまうんです。
初心者さんにとても優しい設計になってます。
今回はそのSTINGER PLUSのちょっと変わったカスタマイズ方法をご紹介したいと思います。
私が紹介するのは、このサイトのTOPページのように、注目してもらいたい記事を３点表示できるカスタマイズ方法です。
DEMOはこちら
※旦那さんにDEMO作ってといったら、かなりぶっ飛んだサイトになりました（汗
どうやってやるか下記に作業手順を書いていきますが、ちょっとややこしいかもしれません。
なので管理画面から簡単に設定ができる子テーマを用意しました。
一番下までいくと設置方法とダウンロードリンクがあるので、「難しいことはいや！」という方は、下まで飛んでくださいね。
目次
【STINGER PLUS】ビジュアル画面の分割とおすすめ記事作成の作業手順
※バグがあったため修正しております（9/13）
下記のような手順でコードを書いてます。
作業手順
１．home.phpを複製したものを子テーマに配置。
２．複製した子テーマのhome.phpにソースコード①を記載する。
３．style.cssへレイアウト調整用のソースコード②を記載する。
４．レスポンシブ対応するためにソースコード③をheader.phpへ記載する。
５．function.phpへソースコード④を記載する。
６．親テーマのpage.phpを子テーマに複製してソースコード⑤を記載する。
１．home.phpを複製したものを子テーマに配置。
通常STINGER PLUS＋ではhome.phpがトップページとして表示されるphpです。
今回はトップページだけに表示させたいので、親テーマのhome.phpを子テーマに複製します。
もし、home.phpの作成ミスで表示されなくなった場合でも複製した子テーマのhome.phpを削除すれば、親テーマのhome.phpが適用されるため元に戻すことができます。
バックアップを取っておく為の対策として子テーマにhome.phpを作成して進めていきましょう。
２．複製した子テーマのhome.phpにソースコード①を記載する。
１で作成したhome.phpに記事３点を表示させる領域のソースコード①（下記）を記載します。
記載する領域とは
<div id="content" class="clearfix">
→ここの領域へ記載する←
<div id="contentInner">
【ソースコード①】
|
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 |
<?php if(get_option('front_three') == 1){ ?> <div id="front-top-contents" class="clearfix"> <?php // 記事IDの読み込み $front1 = get_option('front_three_1'); $front2 = get_option('front_three_2'); $front3 = get_option('front_three_3'); // ループ開始 $args = array( 'post__in' => array($front1,$front2,$front3) , 'orderby' => 'none' ); $the_query = new WP_Query( $args ); $class_i = 1; while ( $the_query->have_posts() ) : $the_query->the_post(); // class指定 ?> <div id="front-top-<?php echo $class_i; ?>"> <a href="<?php the_permalink($frontTop[$i]); ?>"> <?php the_post_thumbnail(array(500,500)); ?> <p><?php the_title(); ?></p> </a> </div> <?php $class_i ++ ; endwhile; wp_reset_postdata(); ?> </div> <?php } ?> |
３．style.cssへレイアウト調整用のソースコード②を記載する。
これで領域を作ることが出来たので、cssでスタイルを整えます。
style.cssへ下記のコードを記載します。
記載する箇所は、style.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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
/* トップ フロント３記事用 PC版 ----------------------------------------------------*/ @media only screen and (min-width: 600px) { /********************** front-top-contents **********************/ #front-top-contents { height:400px; margin-bottom:15px; margin-top:15px; } #front-top-1 , #front-top-2 , #front-top-3 { position:relative; overflow:hidden; } #front-top-1 a , #front-top-2 a , #front-top-3 a { position:absolute; width:100%; height:100%; top:0; left:0; padding-bottom:0px; background-color:#000; } #front-top-1 a img , #front-top-2 a img , #front-top-3 a img { transition:opacity 0.3s linear; } #front-top-1 a:hover img , #front-top-2 a:hover img , #front-top-3 a:hover img { opacity:0.5; } #front-top-1 { float:right; width:calc(60% - 7px); height:100%; } #front-top-2 { float:left; width:40%; height:50%; } #front-top-3 { margin-top:7px; float:left; width:40%; height:calc(50% - 7px); } #front-top-contents #front-top-1 a img { width:100%; height:100%; position:absolute; top:0px; left:0px; transition:transform 0.3s linear; } #front-top-contents #front-top-1 a:hover img { transform:scale(1.2); } #front-top-contents #front-top-2 a img { width:100%; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) scale(1.0); transition:transform 0.3s linear; } #front-top-contents #front-top-2 a:hover img { transform:translate(-50%,-50%) scale(1.2); } #front-top-contents #front-top-3 a img { width:100%; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) scale(1.0); transition:transform 0.3s linear; } #front-top-contents #front-top-3 a:hover img { transform:translate(-50%,-50%) scale(1.2); } #front-top-1 a p , #front-top-2 a p , #front-top-3 a p { position:absolute; top:45%; left:0px; width:100%; height:0px; text-align:center; padding:0px 20px; box-sizing:border-box; margin-bottom:0px; opacity:0.0; color:#eee; font-size:130%; transform:translateY(-20px); transition:transform 0.5s ease-out , opacity 0.3s linear ; } #front-top-1 a:hover p , #front-top-2 a:hover p , #front-top-3 a:hover p { transform:translateY(0px); opacity:1.0; color:#eee; } /*-- ここまで --*/ } /* トップ フロント３記事用 MOBILE版 ----------------------------------------------------*/ @media only screen and (max-width: 599px) { div#front-top-contents a img { width:100%; box-sizing:border-box; } div#front-top-1 , div#front-top-2 , div#front-top-3 { display:block; width:100%; } div#front-top-1 a , div#front-top-2 a , div#front-top-3 a { position:relative; width:100%; height:100%; top:0px; left:0px; } div#front-top-1 a p , div#front-top-2 a p , div#front-top-3 a p { position:absolute; display:block; bottom:0px; left:0px; color:#fff; margin-bottom:0px; text-align:left; background:rgba(0,0,0,0.5); padding:10px; min-height:50px; box-sizing:border-box; text-shadow:1px 1px 5px #777; } /*-- ここまで --*/ } |
４．レスポンシブ対応するためにソースコード③をheader.phpへ記載する。
レスポンシブ対応を考慮して、記事の画像の縦横比を一定にするために、ソースコード③をheader.phpへ記載します。
記載する箇所は<head>～</head>の間、</head>の直前に記載するのが良いと思います。
【ソースコード③】
|
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 |
<script> $(document).ready(function(){ var B_width = window.innerWidth; // windowの横幅を取得 var B_height = B_width * 0.37; // 横幅の37%を高さとする if(B_width < 1060 && B_width >= 600){ $('#front-top-contents').height(B_height); } else { $('#front-top-contents').height(''); } }); $(window).resize(function(){ var B_width = window.innerWidth; // windowの横幅を取得 var B_height = B_width * 0.37; // 横幅の37%を高さとする if(B_width < 1060 && B_width >= 600){ $('#front-top-contents').height(B_height); } else { $('#front-top-contents').height(''); } }); $(document).ready(function(){ // windowの横幅を取得 var SP_width = window.innerWidth; var SP_conwidth = $('#front-top-contents img').width() - 20 ; // front-top-contentsの中のpタグの横幅を指定 if(SP_width < 781 && 315 < SP_width){ $('#front-top-contents p').width(SP_conwidth); } }); $(window).resize(function(){ // windowの横幅を取得 var SP_width = window.innerWidth; var SP_conwidth = $('#front-top-contents img').width() - 20 ; // front-top-contentsの中のpタグの横幅を指定 if(SP_width < 781 && 315 < SP_width){ $('#front-top-contents p').width(SP_conwidth); } }); </script> |
５．function.phpへソースコード④を記載する。
今度は管理画面で設定するためのコードをfunction.phpへ記載します。
function.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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
// tmk管理画面ページ function tmk_kanri() { // データを登録 // チェックボックスのon/off制御 $tmk_head_menu = isset($_POST['head_menu']) ? 1 : 0; $tmk_front_three = isset($_POST['front_three']) ? 1 : 0; // 初回の場合はget_optionで値を取得 if(!isset($_POST['first'])){ $tmk_head_menu = get_option('head_menu'); $tmk_front_three = get_option('front_three'); } // ヘッダーメニュー update_option('head_menu', $tmk_head_menu); // フロント３記事 update_option('front_three', $tmk_front_three); if($_POST['front_three_1']){ update_option('front_three_1', $_POST['front_three_1']);} if($_POST['front_three_2']){ update_option('front_three_2', $_POST['front_three_2']);} if($_POST['front_three_3']){ update_option('front_three_3', $_POST['front_three_3']);} // 更新完了を通知 if (isset($_POST['head_menu'])) { echo '<div id="setting-error-settings_updated" class="updated settings-error notice is-dismissible"> <p><strong>設定を保存しました。</strong></p></div>'; } ?> <div class="wrapper"> <h1>Tmkの設定管理画面</h1> <p>STINGER PLUS+ ver20160612 の追加設定</p> <form method="post" action=""> <input type="hidden" name="first" value="1"> <h2>ヘッダーメニューを常に表示するように固定する</h2> <label><input name="head_menu" type="checkbox" value="1" <?php checked(1,get_option('head_menu')); ?> >固定する</label> <hr> <h2>メニューの下にフロント３記事を表示する</h2> <label><input name="front_three" type="checkbox" value="1" <?php checked(1,get_option('front_three')); ?> >フロント３を表示する</label> <div class="flex_area"> <div> <?php if(get_option('front_three_1')){ ?> <p>右の記事IDは<?php echo get_option('front_three_1') ?>です</p> <?php } else { ?> <p>右の記事IDは設定されていません</p> <?php } ?> 右の記事ID：<input name="front_three_1" type="text"> </div> <div> <?php if(get_option('front_three_2')){ ?> <p>左上の記事IDは<?php echo get_option('front_three_2') ?>です</p> <?php } else { ?> <p>左上の記事IDは設定されていません</p> <?php } ?> 左上の記事ID：<input name="front_three_2" type="text"> </div> <div> <?php if(get_option('front_three_3')){ ?> <p>左下の記事IDは<?php echo get_option('front_three_3') ?>です</p> <?php } else { ?> <p>左下の記事IDは設定されていません</p> <?php } ?> 左下の記事ID：<input name="front_three_3" type="text"> </div> </div> <?php submit_button(); ?> <hr> <h3>記事一覧</h3> <p>id:記事タイトル</p> <?php $args = array( 'post_type' => 'post' , 'posts_per_page' => -1 , 'orderby' => 'ID' , 'order' => 'DESC' ); $the_query = new WP_Query( $args ); while ( $the_query->have_posts() ) : $the_query->the_post(); echo '<p class="id_ichiran">' . get_the_id() . ':' . get_the_title() . '</p>'; endwhile; wp_reset_postdata(); ?> <style> div.flex_area{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-around; } p.id_ichiran { line-height:1em; } </style> </form> </div> <?php } function tmk_kanris () { add_menu_page( 'tmk管理', 'tmk管理', 'manage_options', 'tmk_kanri', 'tmk_kanri' ); } add_action ( 'admin_menu', 'tmk_kanris' ); |
６．親テーマのpage.phpを子テーマに複製してソースコード⑤を記載する。
ワードプレスの表示設定→フロントページの表示を 「固定ページ」→「フロントページ」に設定した場合、page.phpが適用されるためhome.phpと同様にソースコードを追記する必要があるのですが、page.phpへの追記の場合はトップページかどうかの判定が必要なため次のようなコードを追記します。
記載する領域とは（home.phpと同様の箇所です。）
<div id="content" class="clearfix">
→ここの領域へ記載する←
<div id="contentInner">
【ソースコード⑤】
|
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 |
<?php if( is_front_page() && get_option('front_three') == 1){ ?> <div id="front-top-contents" class="clearfix"> <?php // 記事IDの読み込み $front1 = get_option('front_three_1'); $front2 = get_option('front_three_2'); $front3 = get_option('front_three_3'); // ループ開始 $args = array( 'post__in' => array($front1,$front2,$front3) , 'orderby' => 'none' ); $the_query = new WP_Query( $args ); $class_i = 1; while ( $the_query->have_posts() ) : $the_query->the_post(); // class指定 ?> <div id="front-top-<?php echo $class_i; ?>"> <a href="<?php the_permalink($frontTop[$i]); ?>"> <?php the_post_thumbnail(array(500,500)); ?> <p><?php the_title(); ?></p> </a> </div> <?php $class_i ++ ; endwhile; wp_reset_postdata(); ?> </div> <?php } ?> |
後は管理画面の「tmk管理」の画面から設定を行うことで作動します。
最後の「管理画面の設定」にて設定方法を書いてます。
便利な子テーマを用意しました！
ちょっと難しいという方のために「STINGER PLUS+」の子テーマにコードを加えた、派生の子テーマを用意いたしました。
※必ずバックアップを取っていただいて自己責任でお願いします。
（機能としては上記のソースコードを記載しているものと同じなのですが、管理しやすいように別ファイルにして読み込む形をとっています。その為、上記とは多少コードが違います。）
「STINGER PLUS+」の子テーマ「stingerplus-child」にご自分で手を加えてカスタマイズしている場合は注意が必要です。
stingerplus-child-tmkの導入方法
FTPでアップしていただいてもいいのですが、もっと簡単な方法があります。
wordPressの管理画面より「外観→テーマ」を選択。
左上の新規追加よりZIPごとアップロードします。
stingerplus-child-tmkを有効化して「外観→テーマの編集」を開きます。
ご自分でstingerplus-child（子テーマ）のスタイルシートにcssを追加している場合は、コピーしてstingerplus-child-tmkに書き足します。
管理画面での設定
管理画面のtmk管理で設定します。
チェックしてIDをいれるだけです。
「ヘッダーを常に表示するように固定する」は別記事にて書いてます。
【STINGER PLUS②】スクロールした時にナビゲーションを固定する方法
まとめ
あまり使う機会はないかもですけど、stingerでこんなことできるんだなぁと参考にしてもらえたらうれしいです。
質問などあればお問い合わせかtwitterまでお願いします！
Ads by Google