【STINGER PLUS①】ヘッダー画像を記事で分割して表示するカスタマイズ方法

作成日 

更新日  2017/01/23

  • このエントリーをはてなブックマークに追加

 - WEBデザイナー

名称未設定-10

Tamayaのイラストこんにちは!Tamakoです!

みなさんwordPressのテーマ、STINGERを知っていますか?

wordPressを触る人なら必ずといっていいほど耳にしたことがあるかも。

エンジログのenjiさんが作成された、SEOに強い無料のワードプレステーマです。

このサイトもSTINGERシリーズの、STINGER7をカスタマイズして作られているんですよ♪

特にSTINGER PLUSは、歴代のSTINGERの中でも飛びきりすごくて、phpがわからなくても、WEBのことを知らなくても、簡単にサイトの調整できてしまうんです。

初心者さんにとても優しい設計になってます。

今回はそのSTINGER PLUSのちょっと変わったカスタマイズ方法をご紹介したいと思います。

私が紹介するのは、このサイトのTOPページのように、注目してもらいたい記事を3点表示できるカスタマイズ方法です。

DEMOはこちら
※旦那さんにDEMO作ってといったら、かなりぶっ飛んだサイトになりました(汗

一応どうやってやるか下記に作業手順を書いていきますが、ちょっとややこしいかもしれません。

なので管理画面から簡単に設定ができる子テーマを用意しました。

一番下までいくと設置方法とダウンロードリンクがあるので、「難しいことはいや!」という方は、下まで飛んでくださいね。

【STINGER PLUS】ビジュアル画面の分割とおすすめ記事作成の作業手順

※バグがあったため修正しております(9/13)

下記のような手順でコードを書いてます。

作業手順

1.home.phpを複製したものを子テーマに配置。
2.複製した子テーマのhome.phpにソースコード①を記載する。
3.style.cssへレイアウト調整用のソースコード②を記載する。
4.レスポンシブ対応するためにソースコード③をheader.phpへ記載する。
5.function.phpへソースコード④を記載する。
6.親テーマのpage.phpを子テーマに複製してソースコード⑤を記載する。

1.home.phpを複製したものを子テーマに配置。

通常STINGER PLUS+ではhome.phpがトップページとして表示されるphpです。

今回はトップページだけに表示させたいので、親テーマのhome.phpを子テーマに複製します。

もし、home.phpの作成ミスで表示されなくなった場合でも複製した子テーマのhome.phpを削除すれば、親テーマのhome.phpが適用されるため元に戻すことができます。

バックアップを取っておく為の対策として子テーマにhome.phpを作成して進めていきましょう。

2.複製した子テーマのhome.phpにソースコード①を記載する。

1で作成したhome.phpに記事3点を表示させる領域のソースコード①(下記)を記載します。
記載する領域とは

<div id="content" class="clearfix">
→ここの領域へ記載する←
<div id="contentInner">

【ソースコード①】

3.style.cssへレイアウト調整用のソースコード②を記載する。

これで領域を作ることが出来たので、cssでスタイルを整えます。

style.cssへ下記のコードを記載します。

記載する箇所は、style.cssの最後に追記したので大丈夫です。

【ソースコード②】

4.レスポンシブ対応するためにソースコード③をheader.phpへ記載する。

レスポンシブ対応を考慮して、記事の画像の縦横比を一定にするために、ソースコード③をheader.phpへ記載します。

記載する箇所は<head>~</head>の間、</head>の直前に記載するのが良いと思います。

【ソースコード③】

5.function.phpへソースコード④を記載する。

今度は管理画面で設定するためのコードをfunction.phpへ記載します。

function.phpの最後へ追記したので良いでしょう。

【ソースコード④】

 

6.親テーマのpage.phpを子テーマに複製してソースコード⑤を記載する。

ワードプレスの表示設定→フロントページの表示を 「固定ページ」→「フロントページ」に設定した場合、page.phpが適用されるためhome.phpと同様にソースコードを追記する必要があるのですが、page.phpへの追記の場合はトップページかどうかの判定が必要なため次のようなコードを追記します。

記載する領域とは(home.phpと同様の箇所です。)

<div id="content" class="clearfix">
→ここの領域へ記載する←
<div id="contentInner">

【ソースコード⑤】

後は管理画面の「tmk管理」の画面から設定を行うことで作動します。

最後の「管理画面の設定」にて設定方法を書いてます。

前回作成のテーマでのバグ修正について
(前回のテーマを利用してご迷惑をおかけした皆様へ)

■バグの事象
front-page.phpがない場合
管理画面の設定→表示設定→フロントページの表示を、「最新の投稿」に設定した時
home.phpの
「固定ページ」→「フロントページ」に設定した場合、page.php
「固定ページ」→「投稿ページ」に設定した場合、home.php
が適用されます。

しかしfront-page.phpがある場合、
「最新の投稿」に設定した場合、front-page.php
「固定ページ」→「フロントページ」に設定した場合 、front-page.php
「固定ページ」→「投稿ページ」に設定した場合、home.php
が適用されます。

そもそもfront-page.phpについてはhome.phpを元にソースコードを追記しただけですので、「固定ページ」→「フロントページ」に設定した場合については固定ページの記事が表示されない事象がおきてました。
また、「固定ページ」→「投稿ページ」に設定した場合についてはhome.phpを参照するため、子テーマにhome.phpがない場合、親テーマのhome.phpを参照します。フロント3記事の設定をしていない親テーマのhome.phpのため表示がされない事象が起きてました。
 
簡単に言うと、
tamakoのフロント3記事の機能良いじゃん!設定してみよ!
→フロントページの表示が「固定ページ」→「フロントページ」 の設定になっている。→あれ、固定ページの内容が表示されないじゃん!なんだよ!
もしくは、
→フロントページの表示が 「固定ページ」→「投稿ページ」の設定になっている。→あれ、フロント3記事が表示されないじゃん!なんだよ!
というバグが発生していたという状況です。
 
■修正点
設定→表示設定→フロントページの表示 を「固定ページ」にした時でもフロント3記事が表示され、
該当の固定ページが表示できるように下記の修正をしました。
1.front-page.phpを使用しない。
2.親テーマのhome.phpを子テーマhome.phpへ複製しフロント3記事を表示するようにソースコードを追記
3.「固定ページ」→「フロントページ」に設定した場合はpage.phpが適用されるため、トップページの場合のみフロント3記事を表示できるようにソースコードを追記
 

■今回の修正についてのまとめ
トップページに適用されるphpファイルは、
設定→表示設定→フロントページの表示
の設定内容で大きく変わってくることが分かりました。
(認識が甘かった部分があります・・・すいません)
また、is_front_page() is_home() にも影響することがあるので関数利用時も要注意だということが分かりました。

ご迷惑をおかけした皆様申し訳ありませんでした。

便利な子テーマを用意しました!

ちょっと難しいという方のために「STINGER PLUS+」の子テーマにコードを加えた、派生の子テーマを用意いたしました。

stingerplus-child-tmk

※必ずバックアップを取っていただいて自己責任でお願いします。

(機能としては上記のソースコードを記載しているものと同じなのですが、管理しやすいように別ファイルにして読み込む形をとっています。その為、上記とは多少コードが違います。)

「STINGER PLUS+」の子テーマ「stingerplus-child」にご自分で手を加えてカスタマイズしている場合は注意が必要です。

stingerplus-child-tmkの導入方法

FTPでアップしていただいてもいいのですが、もっと簡単な方法があります。

wordPressの管理画面より「外観→テーマ」を選択。
左上の新規追加よりZIPごとアップロードします。

名称未設定-5

stingerplus-child-tmkを有効化して「外観→テーマの編集」を開きます。

名称未設定-3

ご自分でstingerplus-child(子テーマ)のスタイルシートにcssを追加している場合は、コピーしてstingerplus-child-tmkに書き足します。

名称未設定-4

管理画面での設定

管理画面のtmk管理で設定します。
チェックしてIDをいれるだけです。

「ヘッダーを常に表示するように固定する」は別記事にて書いてます。
【STINGER PLUS②】スクロールした時にナビゲーションを固定する方法

名称未設定-7

まとめ

あまり使う機会はないかもですけど、stingerでこんなことできるんだなぁと参考にしてもらえたらうれしいです。

質問などあればお問い合わせかtwitterまでお願いします!

この記事が気に入ったら
いいね!しよう

Twitter で