stinger3からstinger5に変更
ワードプレス4.0への変更・stinger5ダウンロードや子テーマの作成方法
を紹介しています。
レスポンシブとなったWordpressテーマ「STINGER」の最新バージョンであ
る「STINGER５」のダウンロードのやり方を解説します。
SEOの強さとカスタマイズ性の高さがその人気の理由ですね。
レスポンシブとは
Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のフ
ァイルで対応することです。
WebサイトやWebページをパソコンやスマートフォン、タブレット端末など
複数の機器や画面サイズに対応させる際、内容が同じでデザインや動作を
それぞれに最適化した複数のHTMLファイルやCSSファイルを用意し、HTTP
リダイレクトなどでアクセスを振り分ける手法がよく用いられます。
レスポンシブデザインではこのような対応はせず、表示された機器の種類
やサイズに応じて表示内容が最適な状態に変化するよう設定された単一の
ファイルを制作し、すべての機器に同じように送信出来ます。
複数のファイルを用意する場合に比べ、デザインや機能の自由度は下がる
が、すべての機器に同じ内容を表示でき、更新作業の簡略化や更新漏れの
防止が期待が出来ます。
検索エンジンやアクセス解析に内容が重複した複数の異なるURLが出現す
ることも避けられます。
ワードプレス 3.8.4から4.0へ更新
特にワードプレスをバージョンアップしなくてもいいと思いますが、とり
あえずワードプレス 3.8.4から4.0へ更新してみた。
最初に現在使用しているプラグインすべて停止する。
次にワードプレスの管理画面の「ダッシュボード」内の上に表示されてい
る「wordpress4.0が利用可能です！更新してください。」をクリックしま
す。
ワードプレス 4.0に更新
停止していたすべてのプラグインを有効化する。
異常なければstinger5をダウンロードします。
stinger5のダウンロード
本家のサイト stinger5へお邪魔してstinger5の
最新版をダウンロードして保存します。
１０月２０日現在の最新版は
ver20141011のようです。
メニュー内にある「ダウンロード」をクリックして「Download」ボタンを
クリックする。
次にワードプレスを開いて「外観」⇒「テーマ」⇒「新しいテーマを追
加」をクリックする。
先ほどダウンロードした「stinger5 ver20141011.zip」ファイルを選択し
て有効化してみる。
サイトを開いて確認する。
stinger5になっていたら「ＯＫ」です。
stinger5用に子テーマを作成します。
子テーマの作成概要
１．「stinger_child」新規フォルダを作成する(任意のフォルダ名)
２．「style.css」を作成してstinger_childにコピペ
３．必要と思われる「php」ファイルを作成してstinger_childにコピペ
４．「images」フォルダを作成してstinger_childにコピペ
子テーマ作成
尚各ファイルを作成するには「TeraPad」等のcssやphpファイルを扱えるソフト
で編集してください。（windows搭載のメモ帳等では使えません）
１．FFFTPなどを使用して「/wp-content/themes」ディレクトリに、「sti
nger5 child」名（名前は変更可能）でフォルダーを作成します。
２．「style.css」を作成
[css]
/*———————————————
Theme Name: stinger5_child
Template: stinger5ver20140820
———————————————*/
@charset "UTF-8";
@import url(‘../stinger5ver20140820/style.css’);
[/css]
上記箇所の「Template: stinger5ver20140820」バージョン名はstinger5
をダウンロードしたバージョンに変更します。
それと「@import url(‘../stinger5ver20140820/style.css’);」のバージ
ョンも変更します。
３．functions.phpファイルの作成
「親テーマからコピーすればいいんだ！」と思って、関数が記述されてい
るfunctions.phpをそのまま子テーマにコピペすると、
ブログ真っ白！あたま真っ白 になります。
追加したい関数がある場合、1行目に「<?php」記述して、2行目から追加
するモノのみを子テーマ「functions.php」に記述していきます。
初心者は「functions.php」の変更は、親テーマを変更した方が無難だと
思います。
４．その他の「phpファイル」の作成
その他のheader・single・pageなどのphpに変更を加える場合は、親テー
マからそっくりそのままコピーします。
５．子テーマのimagesフォルダ内の画像を読み込ませる
子テーマにimagesフォルダを作成しますが、何もしないと親テーマのimag
esフォルダ内の画像が読み込まれます。
例えば…ファビコンを子テーマ内のimagesフォルダから読み込ませるため
にはheader.phpの一部を変更してあげます。
[css]
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />
[/css]
この中の「get_template_directory_uri」で、「template」を
「stylesheet」
に変更してあげると子テーマimagesフォルダから画像が読み込まれるよう
になります。
でもまあ テーマ内に入れちゃってもいいと思うんですが・・・。
後は子テーマを有効化を忘れずに！！！
作成した各ファイルをFFFTPなどを使用して「/wp-content/themes」ディ
レクトリに、「stinger5 child」名で作成されたフォルダー内にアップ
ロードすれば完成です。
各ファイルの「文字コード」「改行コード」
「style.css」および各「phpファイル」作成時の「文字コード」および
「改行コード」は
文字コード ⇒ UTF-8N
改行コード ⇒ LF
で保存します。
出来たらWPダッシュボード「外観⇒テーマ」でstinger_childを有効化す
る
現地点ではカスタマイズしていませんので、親テーマの同じ表示になって
いたら「子テーマ」の作成は完成です。
コメント