Stinger3 – カスタマイズ備忘録〈その一〉 ~標準でSEOに強いWordPressテーマ(無料)~

公開日:  最終更新日:2014/04/08

LINEで送る
Pocket

stinger3-公式サイト
Stinger3 の公式ページはコチラ → WordPressテーマのSTINGER3公式サイト
※画像は公式ページのヘッダーになります。

SEOに強いと噂のWordPressテーマ「 Stinger 」(現在は ” 3 ” )なんだけど、デザインが好みでなく今まで敬遠していた。
・・・が、カスタマイズ記事を色々見ていると自分でもできそうなのでチャレンジしてみた。

参考にさせていただいたサイトはコチラ。


女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう 「STINGER3」一覧 | えけこのくるる
Stinger | りんろぐ。
wordpressのテーマstinger3で始めに行った7つのカスタマイズ | takahirosuzuki.com
[WP] Stinger 3 の検索ボックスを Google カスタム検索に変更しました| 最近,気になったこと…
人気のWordPressテーマ「Stinger2」を簡単にカスタマイズ。サイドバー編 | ふーたらのページ (GALAXY S4やAndroidやドコモとiPad miniもね)
WordPressでランダム記事の一覧をプラグインを使わないで表示させるやり方 | bl6.jp


カスタム用にテーマを複製

後から分かったことだけどホントは「子テーマ」を作った方が良いらしい。僕はダウンロードしたテーマを複製して編集した。
公式ページよりダウンロードしたテーマファイルはコレ。

stinger3ver201310231.zip

コレを 7zip で解凍した後、必要なファイルを追加したり設定ファイルを編集したりした。
変更が終了したら再び 7zip で圧縮しインストール。もちろんインストールした後で「テーマ編集」しても良い。

オリジナルとカスタムを区別するためにテーマ名を変更。

  • オリジナルのテーマ名:stinger3ver20131023
  • カスタム後のテーマ名:stinger3ver20131023_custom01
  • ダッシュボードで表示されるテーマ名を変更するには style.css を編集する。初めに記述してある Theme Name:◯◯◯◯ を編集すれば良い。

    ヘッダーのブログタイトルをロゴに変更

    好きなロゴ画像をテーマの中にあるimagesフォルダに追加。場所はWordPressがインストールされているディレクトリから、
    ./wp-content/themes/stinger3ver20131023_custom01(ココがテーマ)/images
    をたどれば良い。
    僕は300×60ピクセルの画像 title_logo.png を作成した。
    画像サイズはなんでも良いとは思うのだけれど、Stingerの仕様(?)のためスマホから見た場合はヘッダー画像(大)は表示されず、ロゴ画像が表示されるためスマホサイズに合わせた。PCでもスマホでもこのロゴをクリックするとトップページに飛ぶようだ。
    画像をimagesフォルダに追加したら次は header.php の編集。
    98行目にある、

    この部分を、

    に差し替える。

    フォントの変更・記事タイトルの装飾

    style.css の最後に以下を追記。

    記事タイトル下に点線を入れた。
    テーマ全体のフォントは参考サイトそのままである。

    検索窓をGoogleカスタム検索に変更

    元の検索フォームのデザインが暗い&Google好きのため変更。searchform.php を編集する。
    <div id="search">以下を次の様に変更。

    カスタム検索エンジンのIDはコチラから取得できる。 → カスタム検索 – 検索エンジンの編集

    サイドバーに表示される項目の順番を変更

    Stingerは標準でサイドバーの並びが上から、

    • Google AdSense
    • サイト内検索
    • NEW ENTRY
    • ウィジェット
    • スクロール追随広告

    となっている。AdSense、サイト内検索はそのままでもいいとして、その次に他のウィジェットを表示させたい。
    これには sidebar.php を編集する必要がある。元々のコードの順番を変えてあげれば良い。

    (↑)コレが元のコード。この中の45行目にある、

    この部分を検索の下に移動した。変更後のコードがコレ(↓)

    サイドバーにランダム記事を表示

    これはStingerのカスタマイズではないのだけれどついでに。
    まずテキストウィジェット内でPHPを実行させるために Exec-PHP というプラグインをインストールしておく。
    次に functions.php を編集して、新たにランダム記事表示用の関数を作る。

    テキストウィジェット内で関数を呼び出し。

    これでランダム記事を5件表示させることができる。

    SNSボックスにPocketを追加

    僕自身はPocketを使っていないが、どうやら人気らしいので追加した。
    コードはココから取得。
    sns.phpsns02.php の編集。sns02.php が追尾型SNSボックスのようだ。
    どちらのファイルも各種SNSのコードが <li> 【SNSのコード】 </li> で囲まれている。
    並びで最後にPocketのコードを追記した。

    追尾型SNSボックスを非表示にする&記事タイトル下にSNSボックスを設置する

    記事追加しました。
    Stinger3のカスタマイズ – 追尾型SNSボックスを非表示にする&記事タイトル下にSNSボックスを設置する方法

    【2014年3月12日追記】
    上記記事はタイトルを変更しました。

    あとがき

    いったんカスタマイズはここまで。これで標準の男臭い(?)イメージからだいぶ変わったのではないだろうか。
    ホントはメニューまわりもカスタマイズしたいのだけれど、いかんせん知識が無い・・・
    自分でコードを書けるようになればもっと自由にカスタマイズできるのだがなぁ。

    【2013/12/23 追記】
    カスタマイズ記事を更新しました。
    Stinger3【WordPress3.8対応】 – カスタマイズ備忘録①

    LINEで送る
    Pocket

    サイト内検索

    スポンサードリンク

    これ書いてる人

    こんな記事書いてますが本業は ラーメン屋 です。 詳細はコチラ



    follow us in feedly

    PAGE TOP ↑