Web関連 WordPress

コピペで使える!STINGER8のお手軽カスタマイズ集

投稿日:2017年4月1日 更新日:

どうも、ヨシです。
STINGER8を使っていく上でこれは知っておいた方がいいと思うことを紹介していきます。
まだまだ新しいテーマなので解決策が載ってるページが少ないんですよね。
中には間違った情報もありました。
このページでは初心者でも分かりやすく説明しますので、同じ悩みで悩まれている方がいたら是非参考にして下さい。

※注意※

テーマの編集をする時はInstantWPでテストをするか、FTPクライアントソフトと子テーマで慎重に編集するようにしましょう。
またテーマの編集を行う場合は必ずバックアップを取るようにしてください。
テーマの編集で間違ったコードを記入し更新すると画面にエラーコードだけ表示され一切編集が行えなくなります。(特にfunctions.phpは注意!)
そんな時はこちらのfunctions.phpを更新したらエラーで触れなくなったを参考にして下さい。

記事にアイキャッチを表示させる


トップページの一覧には画像が表示されるのに、記事には画像が表示されなくなっています。
表示するには「外観」から「テーマの編集」で設定をしなければなりません。
ではテーマ編集の中にある「single.php」を開いてみましょう。

single.phpを開いたらCtrlFで検索窓を開き、「タイトル」と検索します。

すると上記のソースが見つかりますので、このソースの真上か真下に下記のソースを記入しましょう。

上に記入すればタイトルの上に画像、下に記入すればタイトルの下に画像が表示されます。

僕はタイトルの下にアイキャッチがくるようにしているのでこのようになります。

以上です。
ね?簡単でしょ?

補足

ちなみにSTINGER8について書かれている記事の中にはこのように表記しているページもありました。

このままコピペしても画像は表示されるのですが、

と、divで必ず閉じるようにして下さい。
予期せぬエラーの原因になりますのでご注意を。

スマホに表示させない方法

スマホには表示させてPCには表示させない、またはPCには表示させてスマホには表示させないようにする方法です。

「スマホ」と「PC」で違うものを表記する

「スマホ」だけ表示する

「PC」だけ表示する

ちなみにこのソースを使えるのは「php」が使える箇所のみです。
記事内では記入しても反映しないのであしからず。
じゃあなにをスマホとPCで分けたらいいでしょう。
それは次の項目でご説明します。

補足

このソースはSTINGER8でのみ反映を確認しております。
他のテーマの場合もしかしたらこちらで条件分岐出来るかもしれません。

違いはというと「st_is_mobile」か「wp_is_mobile」だけなんですが、これが違うだけでエラーになります。
ちゃんと使えるか確認したい場合は「テーマの編集」から「functions.php」を開きます。

このようなソースがありますので「スマホ表示分岐」の下のソースが「st」なのか「wp」なのか、その他なのか、もしくは無いのかを確認してから使うようにして下さい。

ページトップに戻るの設定方法

画面の右下にある押したら一番上に戻るボタンですが、STINGER8にはすでに付いているんです。
少し下にスクロールしてから右下を良ーく見て下さい。

うっすらとした表示なので気付かない方も多いとは思いますが、押せばちゃんとページトップに戻ります。
しかしスマホで表示しているとアドセンスの規約に違反する恐れがあるんですね。
※アドセンスの規約についてはGoogle Adsenseについてを参考にして下さい。

なのでPC上では表示して、スマホでは非表示にしておけば問題ないので表示を切り替えましょう。
「テーマの編集」の「footer.php」の一番下を見て下さい。

このソースを条件分岐にします。

これでPCでは表示されてスマホでは表示されなくなりました。
どうせならこのままページトップのボタンデザインも変更しましょう。
色だけ変えるのならCSSに記述するだけで出来ます。

「テーマの編集」の「スタイルシート」を開きます。
下記のソースを記入して更新します。


このソースを記入するだけでボタンらしく見えました。
ちなみに僕のは手描きの可愛らしいフクロウさんが付いてますね。
このような画像を表示したい時の説明もしましょう。

まず表示したい画像を「メディア」にアップして下さい。
そしてURLをコピーしたら「footer.php」を開きます。

先程、条件分岐したこのソースを少し変えます。

「class=”fa fa-angle-up”」を削除して、画像のタグを記入しました。

ちゃんと表示されましたね。

少し薄くなってますので気になる方は「#page-top a」に「-moz-opacity: 0.6; opacity: 0.6;」と表記されているのを削除すれば元の色に戻ります。

サイドバーにある新着記事の消し方


サイドの新着記事はウィジェットに何も入れなくても表示されてしまいます。
トップページを見ると同じ内容が並んでいて見栄えが悪いので非表示にしましょう。

このカスタムにはFTPクライアントソフトを使うか、サーバーからファイルを編集する必要があります。
僕の場合はエックスサーバーなので、そこからの手順を記載していきます。

まず「ファイルマネージャー」にログインします。

ファイル名の文字コードを「UTF-8」にしたら「自分のドメイン」→「public html」→「wp-content」→「themes」→「STINGER8もしくはSTINGER8-child」


「STINGER8もしくはSTINGER8-child」を開いたら右下のファイル作成欄に「newpost.php」と記入してファイル作成をクリックします。
newpost.phpが作成されたら完了です。
これでサイドバーの新着記事が消えました。

記事下の執筆者の削除


全ての記事下に執筆者と表示されてますね。
個人的にあんまりいらないと思いましたのでこれも非表示にしましょう。

テーマの編集から「single.php」を開きます。

という表記がありますので、この表記をコメントアウトします。

と記入すれば投稿ページの執筆者が消えます。

続いて固定ページの執筆者も非表示にしましょう。
テーマの編集から「page.php」を開きます。

こちらにもこの表記がありますので、コメントアウトします。

これでOKです。

ヘッダーにロゴを表示


カスタマイズでヘッダー画像を入れてもタイトル、キャッチフレーズ、ヘッダーメニューの下に表示されます。
このロゴをタイトルの場所に表示してみましょう。

テーマの編集から「header.php」を開きます。

このソースをコメントアウトします。

追加は<?php /*~*/ ?>でコメントアウトするのと画像タグを入れています。
これでタイトルの箇所に画像が表示されるようになります。

ヘッダー画像にホームリンクをつける


ロゴはこの場所で問題無い!って方の為のカスタマイズです。
せっかくなんでロゴをクリックしたらトップページに戻るようにしてみましょう。

テーマの編集から「header.php」を開きます。

一番下までスクロールすればこのソースが表示されていますので、ここにリンクの設定をします。

これでロゴをクリックするとトップページに飛ぶようになります。

使えないショートコード


テキストモードにあるクイックタグですがかなり便利ですよね。
例えばリンクを張りたい時なんかは「link」タグをクリックすると簡単に設定出来ます。

このように便利なタグなんですが、標準で記載されてるのに使えないものがあります。

  • 目次(TOC+)
  • PCに表示しないボックス
  • スマホに表示しないボックス

とりあえずこのクイックタグは現状使えませんでした。
phpで設定すれば使えるようになるみたいですが僕には設定がちんぷんかんぷんでした。
もし使おうとして反応無くて困ってる方!あなただけじゃなくみなさん使えないから安心(?)して下さい。

ぱんくずを非表示

ブログでは利用が多いぱんくずリストですが、サイト風なページを作成するならあまり必要ないですよね。
という訳で非表示にする方法ですが、2つあります。
1つはCSSで見えなくする方法、もう1つはphpでぱんくずを呼び出させない方法です。
CSSのやり方は簡単です。

単一ページならこの○○に振られたIDの数字を入力すれば、そのページだけぱんくずリストは表示されません。
全てのページに適応するならもっと簡単な記述でいけます。

これで全ページぱんくずが非表示になりました。
しかしこれはあくまで非表示にしただけでソースは表示されてるんですよね。
表画面には表示されないところですが、気になるって方もいると思います。
というか僕が気になりました!
という訳でphpからぱんくずリストを呼び出させないようにしましょう。
手順はこちら。

テーマの編集から「single.php」を開きます。

<!–ぱんくず–>と表示されてますね。
もう少し下を見ると<!–/ぱんくず–>とあります。

そうです、これは製作者様が「これはぱんくずリストを表示する為のソースだよ!」と分かりやすくする為に表示している訳です。
<!– ぱんくず –>から<!–/ ぱんくず –>までに表示されてるソースを消してみましょう。

補足

今後もしかしたらまたぱんくずリストが必要になるかも知れないので、消す前にソースをコピペしてメモ帳などに保存される事をオススメします。

消し終わったら次は「page.php」にも同じように<!– ぱんくず –><!–/ ぱんくず –>があるのでこれも消します。
これで全ページぱんくずは表示されなくなりましたしソースも消えました。

記事一覧の画像サイズ変更

記事一覧のサムネはデフォルトで100x100pxになってますね。
僕的に若干小さく感じるので、このサイズを150pxに変更してみましょう。

では「テーマの編集」を開きましょう。
子テーマを使用されてる方は元の「Stinger8」を開いて下さい。

CSSの中に「kanren」で検索するとこの3行がありますので変更してみましょう。

imgは100%(パーセント)に変更してますので、間違えないようにして下さい。
これで記事の画像が大きくなりましたね。
僕はサイドバーに記事を掲載してないんですが、掲載している方はそっちも大きくなってるはずです。
では続いて、サイドバーのサムネは元のサイズに戻しましょう。

テーマの編集から「sidebar.php」を開いて下さい。

このサイドバーにクラスを付けます。
とりあえず「side-custom」とでも付けましょうか。

では続いてCSSに追加しましょう。
場所は先程変更した

の後に付け加えましょう。

これでサイドのサムネは元に戻りましたね。
他にも画像の対比を変えたりとかも出来るんですが、僕の嫌いなFunctions.phpを触らないといけないので今回は辞めときます。
一応成功はしたんですが、他の方が同じようにして壊れたら申し訳ないですからね。

まとめ

いかがでしたか?
STINGER8はシンプルなテーマなので自由にカスタマイズ出来ますね。
ちなみSTINGER8の有料版AFFINGER4はもっと簡単にカスタマイズ出来るようです。
STINGER8で使えないクイックタグなんかは有料版で使えるようになってるみたいなので、お金に余裕があれば初めからAFFINGER4を購入するのもありかもしれませんね。
詳しく知りたい方はAFFINGER4についてをご覧下さい。
ま、僕はSTINGER8を選ぶけどね。
お金無いからね。

読んで頂きありがとうございました。

-Web関連, WordPress
-, , ,


  1. This sitе was… how do I say it? Relevant!!
    Finally I’ve f᧐und something which helped me. Kudos!

  2. アバター Johne905 より:

    I loved your blog article. Really Cool. edgedekfddde

  3. アバター Smitha35 より:

    Thanks for this article. I’d also like to convey that it can always be hard if you find yourself in school and starting out to initiate a long history of credit. There are many college students who are only trying to live and have long or good credit history can often be a difficult thing to have. dbedgccfgkecgede

comment

メールアドレスが公開されることはありません。

jpeg/png/gifのみ

関連記事

ブログを改良しよう【フォント編】

どうも、ヨシです。 今のサイトの現状ですが、PC版がこちら。 スマホ版がこちら。 うむ、The シンプル! シンプルは嫌いじゃないけど、もう少し自分色を出したいな。 とりあえず、細かな所から変えて行き …

記事を読む

ワードプレスのテーマを「Tortuga」に変えてみた

どうも、ヨシです。 今回すでにテーマを決めて稼動をしている状態から、新たなテーマに変えたいと思います。 今までワードプレスのテーマ「Twenty Sixteen」を使って色々カスタマイズしてたんですが …

記事を読む
no image

このブログについて

はじめまして、ヨシといいます。 まだ私もこのサイトも未熟な状態ですが、少しずつ更新して良くしていければと思ってます。 レイアウトの変え方も、フォントの変え方も分からないこの状態からどれだけ成長出来るか …

記事を読む

A8.netのバナー広告がなんかおかしい

どうも、ヨシです。 僕はたまに自分の過去記事を見てミスや変更がないか確認するんですが、バナーに変な点が付いてるのを見つけました。 なんやこれ? 前はこんなの無かったはず…。とりあえず開発者ツールで確認 …

記事を読む

【WordPress】検索結果で画像だけのページが表示される原因と対策

どうも、ヨシです。 今までこの現象は分かっていても原因が分からず放置していたんですが、やっぱり気になり過ぎたので調べまくってみました。 もしこの悩みを抱えている方がいらっしゃったら参考にして下さい。 …

記事を読む

プロフィール

初めまして、ヨシだよ!
このブログはだいたい音楽やゲーム、アニメ、面白い動画なんかをメインに紹介してたまに自分のアピールをするよ。
それからサイトをちょくちょくいじるので、基本エラー画面が僕のトップページだと思って欲しい。
今WordPressを勉強中なので、便利なコードやプラグインなんかを自分で使ってみて良かったら紹介するよ!

pagetop