Stinger8

【初心者向け】stinger8の子テーマ導入方法と使い方をご紹介!

このブログ開設当初のころよくstinger8のカスタマイズ記事を書いていましたが、その記事がいまだに見られています。

せっかく色々な人に見てもらえているので、見直しと修正を少しずつ加えていこうと思います。

その第一弾として今回は子テーマの導入方法についてご紹介したいと思います。
それではレッツゴー

スポンサーリンク
新たにレンタルサーバーを選ぶならこれ!
エックスサーバー
  • 国内シェアNo.1の高速サーバーなのでストレスフリー!
  • 自動バックアップ機能に標準対応で安心運用可能!
気になるポイント!キャンペーン中に契約すれば.com等のドメインを永久無料で使えます!
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません! またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます! またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

子テーマとは?

子テーマはWordPressのテーマをカスタマイズする際によく使われる仕組みで、エラーの修正やカスタマイズの追加等を比較的簡単にすることができるというメリットがあります。

子テーマについては以下の記事でまとめていますので、よくわからない方は以下の記事をご参考ください。

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし!
WordPressの機能の一つとして、「子テーマ」というものがあります。ブログを書き始めた方の場合や、WordPressを使い始めた方の場合は、「子テーマ?なんだそれ」とか「親テーマにそのままコードを書けばいいじゃん」と思うかもしれません。...
【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする!
前回こちらの記事で、子テーマの重要性について説明しました。今回はその子テーマの導入方法と、使い方についてご説明します。子テーマを導入する!子テーマを導入する方法は2通りあります。1つは親テーマと一緒にダウンロードする!もう1つは自分で子テー...

子テーマを導入する

それではさっそく子テーマを導入していきます。

子テーマファイルをダウンロードする

まずは以下の公式サイトからstinger8のテーマファイルと、子テーマのファイルをダウンロードしてください。
http://wp-fun.com/dl/

ダウンロードファイルは圧縮されていますが、特に解凍する必要はありません。

子テーマファイルをインストールする

.zip形式のテーマファイルをダウンロードできたら、WordPressにテーマをインストールしていきます。

WordPressの管理画面から【外観>テーマ】でインストールしていきます。

画面上部にある「新規登録」をクリックします。

このような画面になりますので、①画面上部の「テーマのアップロード」をクリックし、②「参照」で先ほどダウンロードしたテーマファイルまたは子テーマのファイルを選択を選択し、③「今すぐインストール」をクリックすれば、インストールできます。

ちなみにファイルはひとずつしかインストールすることができません。
そのため2回に分けてインストールしてください。

子テーマを有効化する

無事にインストール出来たら、WordPressの管理画面【外観>テーマ】でこのように表示されます。

こちらで「子テーマ」を有効化します。
「stinger8 child」となっているのが子テーマです。

ちなみに一緒にインストールした親テーマは「stinger8」と表示されていますが、こちらは有効化せずそのままにしてください。
親テーマを土台として子テーマが動きます。
感覚としては親テーマを基準として、子テーマで内容を書き換え行くような感じです。

子テーマの使い方

子テーマには、jsファイルと、「style.css」と「functions.php」ファイルが入っています。
カスタマイズをする場合は、こちらのstyle.cssファイルとfunctions.phpファイルにコードを加えていきます。
最初のうちは、style.cssにコードを追加するのが中心になるかと思います。
ちなみにcssであれば、WordPressの管理画面から【外観>カスタマイズ】の「追加css」からもコードを追加することができます。

子テーマに入っていないファイルをカスタマイズしたいときには、そのコードを親テーマからコピーして、子テーマにアップロードします。
(ヘッダーをカスタマイズしたいときは、「header.php」を追加する等)
そして追加したファイルのカスタマイズを加えたい個所のコードを編集していきます。

まとめ

これでカスタマイズをする準備は完了です。
どんどんカスタマイズしていきましょう!

stinger8はファイル数や構成が非常にシンプルなので、htmlやcssの教材としても非常に適していると思います。
これからWordPressを始めたい方や、プログラミングをはじめたい人にはぴったりなテーマだと思いますので、おすすめです!

【プログラミング入門最強の味方】STINGER8カスタマイズまとめ
WordPressのテーマStinger8のカスタマイズ記事が増えてきたので、記事を種類別に分類をしてみました。STINGER8は基本的には、最低限の機能しかないまっさらなテーマです。その分非常にカスタマイズがやりやすく、HTMLやCSS、...

コピペも良いですが・・・

テーマによってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

私が使用したおすすめの本はこちらです。


コメント

  1. いっちゃん より:

    先日お問い合わせしました、いっちゃんです。

    先日は返信ありがとうございます。
    再度質問で申し訳ありません。
    伝え方が少しおかしかったと思い連絡いたしました。
    —————————————————————
    投稿フォームでカテゴリをABC設定しています。
    ホームのメニュー部分は
    ホーム/A固定/B固定/C固定/contact
    で作っています。

    設定表示→ホームページ→固定ページ→ホームページがホーム。投稿ページが固定A
    で設定しています。

    投稿ホームでカテゴリA,B,C、3記事投稿すると
    現在はすべて固定Aに投稿されます。ホームには表示されません。

    やりたい方法は
    記事A,B,Cを固定A固定B固定Cにそれぞれ表示し、
    ホームに最新順に投稿をすべて載せたいです。

    やりたいことが伝わりますか??
    別なテーマを提案していただきましたが、どうしてもstingerを
    使いたいです。

    時間がかかっても頑張りたいと思うので
    Function.phpのファイルにコードを書いていきたいと思うのですが、
    Function.phpを子ページファイルから開こうと思ったのですが、
    ダウンロードされるだけで表示ができません。

    何か特別な方法が必要なのでしょうか。

    お手数ですが、教えていただけると幸いです。
    よろしくお願いいたします。

    • ぷるぷるぷるぷる より:

      いっちゃん さん

      コメント欄からありがとうございます!
      おそらく伝わったと思いますが、また異なった認識をしていたらすみません。

      カテゴリーをAとして分類したものについては、
      Aのページに新着順に記事の一覧を表示させ、
      Bとして分類したものは、
      Bのページに新着順に表示…

      ホームにはカテゴリー別ではなく、
      投稿した全記事を新着順に表示させる
      というような構成にしたいという認識のもと、
      とりあえず解説したいと思います。

      いっちゃんさんがやりたいことを想定すると、グローバルメニューにカテゴリ名などが表示されていて、そこをクリックすると、そのカテゴリに分類されている記事が新着順に表示されるということではないでしょうか?

      それであれば、WordPressの管理画面から
      【外観>メニュー】で設定します。
      メニューの設定画面の左側の「メニュー項目を追加」に「カテゴリ」はないでしょうか?
      そこから、表示させたいカテゴリを1つずつグローバルメニューに追加してください。
      それでおそらくグローバルメニューからカテゴリごとのページにアクセスできるようになるはずです。

      またホームに最新順で投稿を全て表示させる場合は、
      【設定>表示設定】の「ホームページの表示」を固定ページではなく、「最新の投稿 」にすればとりあえずは最新順にすべての記事が表示されるはずです。

      また違うことを解説しているようであれば、根気よくコメント頂けると幸いです(笑)