楽ブログ

楽に楽しくやるブログ

スポンサーリンク(レスポンシブ)横長

スポンサーリンク

【STINGER8】やってみたカスタマイズのメモまとめ

2017/10/11

STINGER8

このブログで使ってるWordPressの無料テーマの「STINGER Plus+」が、次のバージョンの準備のためとのことで公開終了してからしばらく経ってましたが。

ようやく先月の中頃に新バージョンの公開がされたとの情報を受けまして、早速見に行ったのですが・・・なんと予想外の事態になってまして。

これまで初心者にも優しく、簡単にカスタマイズできることで人気のあった「STINGER」シリーズだったのに、今回の「STINGE8」ではその流れからまったく異なる方向へとスイッチ。

きわめてシンプルで、カスタマイズの設定項目や機能が、これまでと比較してずっと縮小されたテーマになってました。

HTMLやCSSそしてPHPの知識のある人ならともかく、そうでない初心者の人にとってはとても残念な仕様で、今後は利用者も減ることでしょうが。

作成者にとっては、無料公開の上にサポートに手間がかかるので、やむなく敢えて利用者を絞る方向にしたのではないかと思われます。

というわけで現在利用中の「STINGER Plus+」は、そのまま使い続けることにして、このブログでの「STINGER8」の利用は見送ることにしたんですが。

ちょうど他のWordPressのブログのテーマを変えようと思ってたんで、そちらで試しに「STINGER8」を使ってみることにしまして。

いろいろとカスタマイズを始めたので、備忘録としてその手順のメモを記事にしておくことにしました。

まず最初にやったこと

子テーマの追加

WordPressのテーマのカスタマイズをやろうって人なら、言うまでもないことなのかも知れませんが、念のため。

STINGER8のダウンロードページの本体のすぐ下に「STINGER8子テーマ」っていうのがありますが、これをダウンロードしてWordPressのテーマに追加して有効にしてやります。

これは親テーマである「STINGER8」のほうを直接カスタマイズすると、そのバージョンアップがあったときに、すべてのカスタマイズを新しいバージョンのファイルに改めて施してやる面倒を避けるためでして。

PHPファイルやCSSファイルに手を加える場合は、すべて「子テーマ」のほうのファイルを対象にすることで、バージョンアップで「親テーマ」が新しくなっても、そのカスタマイズした「子テーマ」のほうをそのままに使えば、「親テーマ」には何もしなくても問題無いというわけですね。

CSSファイルの変更

次に、その「子テーマ」なんですが、CSSを定義するファイルの「style.css」を見てみると、以下のように空っぽでメディアクエリだけが記述されてます。

/*
Theme Name: STINGER8 Child
Template: stinger8
Version: 20161115
*/
@import url('../stinger8/style.css');
        
/*media Queries タブレットサイズ(960px以下)
----------------------------------------------------*/
@media only screen and (max-width: 960x) {
        
        
/*-- ここまで --*/
}
        
/*media Queries タブレットサイズ(600px以上)
----------------------------------------------------*/
@media only screen and (min-width: 600px) {
        
        
/*-- ここまで --*/
}
        
/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
        
        
/*-- ここまで --*/
}

ただこれを「親テーマ」の同ファイルと比較するとサイズの指定が違ってまして、気にしなければ気にしないでいいとは思うんですが、後々不都合が生じて修正する必要が出てきたりすると嫌なので、以下のように「親テーマ」と同じになるように書き換えましたよ。

/*
Theme Name: STINGER8 Child
Template: stinger8
Version: 20161115
*/
@import url('../stinger8/style.css');
        
/*media Queries スマートフォンとタブレットサイズ(959px以下)で適応したいCSS - スマホ・タブレット
----------------------------------------------------*/
@media only screen and (max-width: 959px) {
        
        
/*-- ここまで --*/
}
        
/*media Queries タブレットサイズ(600px~959px)のみで適応したいCSS -タブレットのみ
----------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {
        
        
/*-- ここまで --*/
}
        
/*media Queries タブレット(600px)以上で適応したいCSS -タブレット・PC
----------------------------------------------------*/
@media only screen and (min-width: 600px) {
        
        
/*-- ここまで --*/
}
        
/*media Queries PCサイズ(960px)以上で適応したいCSS - PCのみ
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
        
        
/*-- ここまで --*/
}

CSSによるデザインの調整は、これらの中から該当するサイズの部分に記入することで対応できるわけです。

すべてのサイズに共通して適用されるようにする場合は、メディアクエリ指定の枠の外、つまり上記の青字の「@import」のすぐ下のところに記入すれば良いですね。

記事とサイドバーの幅を調整(PC用)

記事とサイドバー部分の幅を狭くしたかったので、子テーマのCSSの「PCサイズ」のところに以下の記述を追加しました。

#content {
    width: 800px;    /* 全体の幅 */
}
.st-main {
    width: 440px;    /* 記事エリアの幅 */
}
#side .st-aside {
    width: 240px;    /* サイドバー部分の幅 */
}

全体の幅を800pxにして、それに合うように記事部分とサイドバー部分の幅を調整しました。

それぞれの幅の値の合計が全体の幅よりも小さいのは、デフォルトで“padding”などの余白の指定がされているためです。

ブログタイトル部分の変更

ブログタイトルの背景を画像にする(PC用)

ブログタイトルの背景を画像にするために、まずは用意した背景画像(header.png)をサーバにアップロードします。

まずは、子テーマのディレクトリの中(ワードプレスのルートディレクトリ/wp-content/themes/stinger8-child)の中にある「images」ディレクトリへ、FTPで背景画像をアップロード。

次に、子テーマのCSSの「PCサイズ」のところに以下の記述を追加しました。

#headbox {
    height: 180px;   /* 画像の高さと同じ */
    width: 800px;    /* 画像の幅と同じ */
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    padding: 0px;
}
header, #headbox-bg {
    height: 180px;   /* 画像の高さと同じ */
}

高さと幅は、画像のサイズ(180px×800px)に合わせたものです。

ブログタイトルとブログ内容の位置調整(PC用)

ブログタイトルとブログ内容の文字位置を少し右に寄せたかったので、子テーマのCSSの「PCサイズ」のところに以下の記述を追加しました。

#header-l {
    margin-left: 60px;
}

左に作った余白によって、その分だけ文字が右に寄るようにしたわけです。

ブログタイトルの色の変更

ブログタイトルの色を変更するために、子テーマのCSSに以下の記述を追加しました。

header .sitename a {
    color: #009933;
}

ブログ説明の色の色の変更

ブログ説明の色を変更するために、子テーマのCSSに以下の記述を追加しました。

header .descr {
    color: #999933;
}

文字のサイズ等の変更

記事タイトルの文字サイズなどの変更(PC用)

PC表示の記事タイトルが大きすぎるので、小さくするように子テーマのCSSの「PCサイズ」のところに、以下の記述を追加しました。

#content h1.entry-title {
    font-size: 18px;        /* 文字サイズ */
    line-height: 1.4em;     /* 行間 */
}

文字サイズに合わせて、折り返したときの行間のサイズも調整してあります。

記事の文字サイズなどの変更(PC用)

PC表示の文字サイズをデフォルトよりも小さくしたかったので、子テーマのCSSの「PCサイズ」のところに以下の記述を追加しました。

.entry-content p {
    font-size: 14px;        /* 文字サイズ */
    line-height: 1.4em;     /* 行間 */
    margin-bottom: 1.2em;   /* 段落間 */
}

文字サイズに合わせて、行間や段落間のサイズも調整してあります。

記事内画像の周りの余白を調整

記事内画像の周りの余白を調整するために、子テーマのCSSに以下の記述を追加しました。

.entry-content p img {
    margin: 1em;
}

上下左右の余白を1文字分にしたものです。

記事の上に表示されるカテゴリの消去

記事の上に表示されるカテゴリを消すために、PHPのファイルを修正しました。

修正するファイルは「single.php」で、まず親テーマのディレクトリにある同ファイルを子テーマのディレクトリにコピーします。

次にファイルの中の「カテゴリ表示」の部分に、以下の黄字の1行を追加しました。

<?php //カテゴリ表示
$GLOBALS['stdata60'] = 'yes';
if ( isset($GLOBALS['stdata60']) && $GLOBALS['stdata60'] === 'yes' ) {

記事の上に表示される投稿日の表示変更と更新日の消去

まず、記事の上に表示される投稿日と更新日を消すために、親テーマのディレクトリから子テーマのディレクトリにコピーした「single.php」ファイルに、以下の黄字の2行を追加しました。

次に、投稿日を「Fontawsome」のアイコンで表示するために、以下の青字の1行を追加しました。

<div class="blogbox">
    <p><span class="kdate">
<?php /* ?>
        <?php if ( get_the_date() != get_the_modified_date() ) : //更新がある場合 ?>
            投稿日:<?php echo esc_html( get_the_date() ); ?>
            更新日:<time class="updated" datetime="<?php echo esc_attr( get_the_modified_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_modified_date() ); ?></time>
        <?php else: //更新がない場合 ?>
            投稿日:<time class="updated" datetime="<?php echo esc_attr( get_the_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_date() ); ?></time>
        <?php endif; ?>
<?php */ ?>
        <i class="fa fa-pencil" aria-hidden="true"></i><?php echo esc_html( get_the_date() ); ?>
    </span></p>
</div>

「Fontawsome」のアイコンは無料で使える便利なフリーアイコンセットなんですが、この「STINGER8」ではそれがすぐに使えるように既に設定がされてるんで、何も準備無しに上記の記述だけで使用できるところが良いですね。

ここでは鉛筆のアイコンをセットしましたが、他のアイコンの種類は「Fontawsome」のサイトで確認できます。

いろいろあって、おもしろいですよ。

記事下部の表示調整

記事の下に表示される執筆者の消去

記事の下に表示される執筆者を消すために、親テーマのディレクトリから子テーマのディレクトリにコピーした「single.php」ファイルに、以下の黄字の2行を追加しました。

<?php /* ?>
    <p>執筆者:<?php the_author_posts_link(); ?></p>
<?php */ ?>

記事の下に表示される関連記事の消去

記事の下に表示される関連記事を消すために、親テーマのディレクトリから子テーマのディレクトリにコピーした「single.php」ファイルに、以下の黄字の部分を追加しました。

<!--関連記事-->
<?php //get_template_part( 'kanren' ); ?>

表示するための関数をコメントアウトしただけですね。

サイドバーの表示調整

新着記事のトップ・月別・カテゴリページでの非表示

サイドバーにデフォルトで表示される「最近のエントリ」は、トップ・月別・カテゴリページで表示されるのは意味無いかなと思いました。

それで、それぞれのページで非表示にするように、親テーマのディレクトリから子テーマのディレクトリにコピーした「sidebar.php」ファイルに、以下の黄字の2行を追加しました。

<?php if(!is_home() && !is_front_page() && !is_archive()) { ?>
<?php get_template_part( 'newpost' ); //最近のエントリ ?>
<?php } ?>

「is_home」と「is_front_page」の関数でトップページを判定して、「is_archive」の関数で月別・カテゴリページを判定して、それぞれのページでは非表示になるようにしたわけです。

サイドバーのタイトル(見出し)デザインの変更

サイドバーのタイトル(見出し)のデザインを変更するために、子テーマのCSSに以下の記述を追加しました。

p.menu_underh2 {
    font-size: 16px !important;
    color: #fff;
    background: #330000;

    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 5px;

    padding: 5px 10px 5px 10px;
    margin-bottom: 10px;
}

まず黄字部分の指定によって、文字サイズを調整するんですが、親テーマのメディアクエリによる指定のほうが強いので、普通に指定すると有効になりませんでした。

それで、こちらでもメディアごとの指定をしてやればいいんですが、面倒だしPCやタブレットで共通に指定してやりたかったので、「!important」指定をつけてやりましたよ。

こうすることによって、強制的にここで追加したフォントサイズが優先されるんですね。

次に赤字部分の指定で、文字色と文字の背景色を指定。

さらに青字部分の指定で、文字を角丸の長方形で囲ってやりました。

「1px」は囲みの枠の境界線の太さで、その後の「#ccc」はその色の指定です。

それから、「border-radius」の値によって角丸の丸め具合が調整できて、ここの数値が大きいほど丸くなるので、必要なら好みに応じて変えると良いでしょう。

そして白字部分の指定で、周りの囲み線と文字との間の余白のサイズを調整しています。

数値の並びは、左から順に「上・右・下・左」の余白のサイズを指定していますが、この記述方法は「margin」の指定をする場合も同様ですよ。

最後に、緑字部分の指定でタイトルの下の余白のサイズを調整しています。

デフォルトだと少し開き過ぎなような気がしたので、チョットだけ詰めてやりました。

これは、前述のように「padding」の指定と同様にして、

margin: 0px 0px 10px 0px;

と指定してやっても同じ意味になるので、同じ結果が得られますね。

フッターのブログ名・ブログ説明の非表示

フッターに表示される「ブログ名・ブログ説明」は、特に必要無いかなと思いました。

それで、親テーマのディレクトリから子テーマのディレクトリにコピーした「footer.php」ファイルに、以下の黄字の2行を追加しました。

<?php //フッターメニュー
$defaults = array(
    'theme_location'  => 'secondary-menu',
    'container'       => 'div',
    'container_class' => 'footermenubox clearfix ',
    'menu_class'      => 'footermenust',
    'depth'           => 1,
);
wp_nav_menu( $defaults );
/*
?>
    <div class="footer-wbox clearfix">
        
        <div class="footer-c">
            <!-- フッターのメインコンテンツ -->
            <p class="footerlogo">
            <!-- ロゴ又はブログ名 -->
                <?php if ( !is_home() || !is_front_page() ) { ?>
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php } ?>
                    <?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
                <?php if ( !is_home() || !is_front_page() ) { ?>
                    </a>
                <?php } ?>
            </p>
        
            <p>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'description' ); ?></a>
            </p>
        </div>
    </div>
<?php */ ?>

該当範囲をすべて、コメントアウトしたわけです。

ウィジェットエリアの追加

「STINGER8」にも十分なウィジェットエリアが付いてますが、それ以外にも希望の場所にウィジェットが追加できるようにしたい場合がありますね。

そんなときは以下のようにしますが、例としてヘッダー部分にウィジェットを表示するためのエリアを作る場合を考えて見ましょう。

まず子テーマの「function.php」に、以下のコードを追加します。

if(function_exists('register_sidebar')) {
    register_sidebar(
        array(
            'id' => 'header-widget',
            'name' => 'ヘッダーウイジェット',
            'description' => 'ヘッダーに表示されるコンテンツエリアです。',
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<p class="widget-title">',
            'after_title'   => '</p>',
        )
    );
}

これによって、「ヘッダーウィジェット」という名前のウィジェットエリアが、管理画面に追加されます。

ここで赤字の「id」は、ウィジェットエリアをユニークに識別するための名前で、好きな名前をつけて構いませんが、アルファベット小文字を使いましょう。

大文字を使うと、なぜかウィジェットが表示されないという不具合が発生するので要注意です。

次に黄字の「name」と「description」は、管理画面に表示されるウィジェットエリアの名前と説明です。

そして青地の「before_widget」と「after_widget」は、ウィジェットが表示される際の前後に付加されるHTMLタグの指定です。

後でCSSによって表示形式を指定しやすくするために、「id」と「class」を定義してますが、無くても構いませんよ。

ちなみにここでは、ウィジェット名にハイフンと数字が付けられる「%1$s」を定義して、「id」が自動でユニークになるようにしています。

同様に「class」のほうは「widget %2$s」として、自動でウィジェット名などが定義されるようにしています。

この記述方法はリファレンスで推奨されているやり方ですが、自由に好きな名称をつけるなどの変更しても問題ありませんね。

そして緑字の「before_title」と「after_title」は、ウィジェットが表示される際の「タイトル」の前後に付加されるHTMLタグの指定になります。

やはり同様にして「class」の指定をしてますが、ここも自由に改変してオッケーですよ。

さて続いて、このウィジェットエリアにセットしたウィジェットが、実際にヘッダー部分に表示されるようにするための手順です。

まずは、親テーマの中にある「header.php」を子テーマのほうにコピーします。

そして表示させたい部分にコードを挿入しますが、今回は以下のように</header>タグの直前にしました。

    <?php if(is_active_sidebar('header-widget')) dynamic_sidebar('header-widget'); ?>
</header>

赤字の部分は、上のウィジェットエリアの作成の際に定義した「id」になります。

今回はヘッダ部分にウィジェットを追加できるようにしましたが、同様にすればフッタや記事の上下部分などに追加できるウィジェットエリアも作成できますね。

スポンサーリンク

おわりに

まだまだカスタマイズが必要なところがあるんですが、なかなか簡単にとはいかなくて、アレコレ試しながら調整していくことが必要なテーマですね。

これからも変更を加えた内容を随時追加していこうと思いますよ。


コチラの記事もどうぞ!

記事下アフィリウィジェット


こちらは、WordPressの基礎を勉強したい人におすすめの書籍です。

WordPressレッスンブック HTML5&CSS準拠

著者:エビスコム

amazon

楽天で探す

いちばんやさしいWordPressの教本

人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応

amazon

楽天で探す

スポンサーリンク

楽天モーションウィジェット(600×200)スマホ非表示

-ブログの話
-,