stinger3　備忘録　３

 

子テーマの作成・ＣＳＳを変更しても反映されない時の対処・おすすめプラグイン。

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ したやり方等を忘れないために書き留めた備忘録です。

記事内にソースコードを表記してる箇所は、ダブルクリックすると ソースコードが全選択されるので、コピーして使えます。

 

【子テーマの作成】

 

元のファイルに上書きして編集してしまうと、テーマのバージョン アップがあった時にカスタマイズした部分まで上書きされて変更したものが全部消えてしまいます。

それを防ぐためにも、元の親テーマのコピーと言える子テーマを作って、そちらに編集していきます。

最初にやる事は、Wordpressをインストールしたフォルダの中の、 「themes」フォルダ内に子テーマのフォルダを新しく作る。

フォルダー（ディレクトリ）を新しく作成するには、フリーソフト 「ＦＦＦＴＰ］を使った。

1.FFFTPを開いてさくらのデータベースに接続。

2.「www」→「wordpress」(WPをインストールする時につけた任意

のフォルダ名)→「wp-content」と辿っていくと「themes」フォルダを発見。

3.これを開くとダウンロードしたstingerテーマのフォルダ「stinger3ver20131217」があるので、この階層にフォルダ作成で新しく子テーマのフォルダを作ります。

4.子テーマフォルダ名は自分でわかりやすい名前をつければOKです。

私は「stinger-child」でつくりました。

この名前は後から使うときに大文字小文字を区別するので、小文字で統一したほうがよさそうです。

これで、子テーマのディレクトリ（フォルダ）ができました。

 

 【ＣＳＳファイルを新しく作成する。】

 

テキスト編集ソフトのTerapadを起動します。

そこに親テーマの内 容を引き継ぐためのコードを貼り付ける。

[css]
/*
Theme Name: stinger-child
Template: stinger3ver20131217
*/
@charset "UTF-8";
@import url(‘../stinger3ver20131217/style.css’);
[/css]

Theme Nameは子テーマの名前、Templateはもとの親テーマstinger の親テーマディレクトリの名前をそのまま入れます。

その下の（）の中は、/親テーマディレクトリ名/style.cssにします。

大文字小文字を区別するので、必ずディレクトリ名と一致するようにした。

記入したら、名前を「style.css」で適当な場所に保存します。

テーマカスタマイズに使うファイルは今後全てそうですが、 必ず「文字/改行コード指定保存」で文字コード「UTF-8N」、改行 コード「LF」にしておかないとおかしくなるようです。

もう一度FFFTPを開き、先ほど作った子テーマディレクトリ「stinger-child」を開きます。

ここに、新しく作った「style.css」をドラッグ＆ドロップすると ディレクトリの中にファイルがアップロードされる。

 

【ダッシュボードから子テーマを有効にする。】

 

きちんと子テーマが作成されていると、ダッシュボードの外観→ テーマの中の利用可能なテーマに、先ほど作ったstinger-childが 表示されているはずなので、それを有効化する。

そうすると、有効化しているのは先ほど作った子テーマですが、そ こに親の情報が引き継がれて、最初に元々のstingerを有効化した 時のデザインがそのままサイトに表示されるようになっているはず。

あとは、この子テーマの中のstyle.cssにカスタマイズしたいこと をどんどん追加して書いていけば、その内容が反映されるというわけです。

注意　！！！   カスタマイズした項目を、子テーマに記述したすべてが実行できな かった。

出来なかったカスタマイズは親のＣＳＳに追記した。（結構あっ た）

尚、カスタマイズした後に子テーマ作成したので、私は親テーマの ＣＳＳをそっくり上書きした。

 

【ｃｓｓを変更しても反映されない時の対処】

 

ｃｓｓを変更した時、反映されない事ってありますよね その原因のひとつに キャッシュが残ってる場合があります。

キャッシュを消去すればいいのですが、毎度消すのも面倒です。

それを解消する方法を紹介します。

[php] <link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url ‘); ?>" type="text/css" media="all"/>[/php]

の記述を

[php]<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url ‘); echo ‘?’ . filemtime( get_stylesheet_directory() . ‘/sty le.css’); ?>" type="text/css" media="all" /> [/php]

に変更した。

変更前のヘッダー(header.php)の一部

[css]
<!—css切り替え—>
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo ge
t_template_directory_uri(); ?>/images/webclick.png" />
<meta name="viewport" content="width=device-width,initial-sc
ale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directo
ry_uri(); ?>/smart.css" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1,
user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url
‘); ?>" type="text/css" media="all"/>
<?php } ?>
<?php wp_head(); ?>
[/css]

変更後のヘッダー(header.php)の一部

[css]
<!—css切り替え—>
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo ge
t_template_directory_uri(); ?>/images/webclick.png" />
<meta name="viewport" content="width=device-width,initial-sc
ale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directo
ry_uri(); ?>/smart.css" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1,
user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url
‘); echo ‘?’ . filemtime( get_stylesheet_directory() . ‘/sty
le.css’); ?>" type="text/css" media="all" />
<?php } ?>
<?php wp_head(); ?>
[/css]

このようにする事で、キャッシュを毎回消さなくてもこれが原因で 反映されない原因のひとつが解消される。

なぜかそれでもカスタマイズが、反映してくれないものもあったの で一度子テーマにカスタマイズして、できなかったらあきらめて親 テーマのほうでカスタマイズしてます。

なので私の場合、たぶんしばらくは更新はしないと思う。

 

【ワードプレスおすすめプラグイン】

 

導入方法は、プラグインタブ内にある「新規追加」をクリックする。

続いて検索窓に必要なプラグイン名を入力して、となりの「プラグ インの検索」クリックする。

一覧から希望のプラグインを「有効化」する。

インストール後、下記プラグインを導入した。

 

１．Google XML Sitemaps

Google用のXMLサイトマップを作成するプラグインです。

プラグインは有効化するだけでOKですが、必ず「Googleマスターウェブツール」で登録をした。

 

２．Broken Link Checker

リンク切れのリンクに打消し線を自動で付与し、リンクを消してくれます。

リンク切れはSEO対策にも良い影響は与えないので早めの対策が必要です。

 

３．Meta Manager

メタキーワードとディスクリプションを各記事毎に設定できます。

初心者は、「All in One SEO」よりシンプルなのでこちらの方がおすすめ。

 

４．EWWW Image Optimizer

アップロードした画像を自動で圧縮してくれます。

 

５．G Analytics

シンプルでわかりやすい、管理画面用のGoogleAnalyticsプラグイン。

管理画面でブログのアクセス数等が確認できる。

 

６．PS Auto Sitemap

自動でサイトマップを作成してくれます。