カスタマイズ中です。表示がみだれる場合があります。

Cocoonでのスキン切換え方法

Photo on Visualhunt Cocoon
Photo on Visualhunt
スポンサーリンク

寝ログのわいひらさんが、新しいwordpress無料テーマCocoonを公表してくれました。

私も、Cocoonがver1.00になったのでSimplicicyから切換えました。

Cocoon用のスキンも皆さんが作成してくれたので、記事毎にスキンを切り替えています。

Simplicityとは、ちょっと記述の仕方が違うのでフォーラムで教えて貰いました。

 

スキンとは

スキンの説明は、Simplicity作者のわいひらさんがされてます。

スキン機能というのは、テーマカスタマイザーから、オプションを選択するだけで、あらかじめ用意されているスタイルシートを呼び出して手軽にテーマの外観を変更する機能です。

外観や見出しとか表示方法を変えることが出来るということですね。

変更するのは簡単ですが、全ての記事が設定されたスキンスタイルになるので結局は1サイトに付き、一つのスキンしか表現は出来ないですよね。

そこで、fonction.phpを書き換えることによって記事毎にスキンを切り替えて使うと便利です。

 

スキン着せ替え方法

Cocoonにスキン表示を制御する方法は、こちらで説明されています。

Cocoonスキンの機能の仕様
Cocoonのスキン機能に関する詳細な仕様書です。スキン機能を利用すれば、洋服を着替える感覚でサイトデザインを変更することが可能です。

 

手順を簡単に説明

子テーマのfunctions.phpを書き変えます。

各スキンをページ毎に表示する方法ですが、これだけ、なんですけど….

Simplicityのやり方では、表示できなかったので、Cocoonののフォーラムで教えて貰いました。その方法を解説します。

 

function.phpとは

まず、第一にfunction.phpですが

WordPressの解説の中に詳しく書いてあります。

https://wpdocs.osdn.jp/functions.php_%E6%A6%82%E8%AA%AC

 

 

まあ、難しいですね!  私は単純にfunctions.phpは、WordPressテーマで使う関数を扱うファイルであると理解しました。

phpは「PHP: Hypertext Preprocessor」の略で、プログラムを作る時の元ネタが書かれたソースファイルプログラミング言語でスクリプト言語と呼ばれる種類だそうです。

 

functions.php の編集する場所

WordPressの中では、

管理メニュー > 外観 > テーマ編集 > テーマのための関数 (functions.php)で行います。

 

functions.php のある場所

実際のファイルが何処にあるか、FTPソフトでレンタルサーバーの何処にあるか確認してみました。私の場合のレンタルサーバーはXSERVERです。

/chan-biku.club/public_html/wp-content/themes/cocoon-child-master/functions.php

 

みなさんのサイトでは

/サイト/public_html/wp-content/themes/cocoon-child-master/functions.php

のようになります。

 

functions.php 編集の際の注意

functions.phpを編集する時には、必ずバックアップを取っておかないといけません。

でないと、私のようにサイトが表示されなくなったりします^^;

私の間違いは、{    がなかったり がなかったり、一文字違うだけで、もうシンタックスエラー表示が出て繋がらなくなりました。

 

つながらなくなったら、ftpソフトでバックアップしてあるfunctions.phpをアップロードして復旧する方法をとります。 私の場合にはFileZillaで行いました。

 

FileZillaの使用方法は下記で記事にしてます。

無料FTPソフトFileZillaの使い方
WEBサイトを管理するには、ローカル環境からのファイルのアップなどで、FTPソフトを利用しないと出来ないことがあります。無料のFTPソフトFileZillaの使い方インストール方法から使い方までを紹介したいと思います。

 

レンタルサーバーのサーバーパネルから行う方法もあります。

 必ず復旧の方法を確立してから書き換えを行いましょう。

 

functions.phpの書き方

最終的な私のサイトのfunction.php

フォーラムでAkiraさんのアドバイスから自分用に書き変えました。

function get_skin_url() {
    $skin_file = get_theme_option( OP_SKIN_URL, '' );
    
    if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-modernblack/style.css';
    }
    if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/m-sora/style.css';
    }
    if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/m-tomato/style.css';
    }
    if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-dot-rainyblue/style.css';
    }
    if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-ganchan01/style.css';
    }
    if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-ganchan02/style.css';
    }
    if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-ganchan03/style.css';
    }
    if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-ganchan11/style.css';
    }
    if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-ganchan12/style.css';
    }
     if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-ganchan13/style.css';
    }
     if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-ganchan21/style.css';
    }
     if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-mixblue/style.css';
    }
     if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-mixgreen/style.css';
    }
     if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-mixred/style.css';
    }
     if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/skin-samuraiblue-muji/style.css';
    }
     if( is_single( array( 1000,2000 ) ) ) {
        $skin_file = get_template_directory_uri().'/skins/hygiene/style.css';
    }
    return $skin_file;
}
記事番号は、ダミーで入れてます。複数の記事をスキン変更すると考えてarray関数を最初から書いています。

 

スキンを選択していると、そのスキンがデェフォルトになります。

当サイトの場合には、サムライブルーをデェフォルトに指定しています。

自分でカスタマイズしている場合には、見出しなどがダブって表示されたりするので注意が必要です。回避するには、自分でカスタマイズしたCSSは、スキンとして作成して指定しておけば良いと思います。

 

 

関数の解説

function.getで新しいプロパティのアクセサリー宣言をして、skin_fileを読み込む。

is_single関数

is_single関数は、条件分岐関数の一種です。WordPress Codex 日本語版に説明があります。他にも条件分岐関数は沢山あります。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/is_single

 

is_single(); // 任意の個別投稿のページが表示中。

is_single( ’17’ ); // ID 17 の投稿が表示中。

is_single( 17 ); // ID 17 の投稿が表示中。

17という整数パラメータも使えます。

is_single( ‘Irish Stew’ ); // “Irish Stew” というタイトルの投稿が表示中。

is_single( ‘beef-stew’ ); // “beef-stew” というスラッグの投稿が表示中。

is_single( array( 17, ‘beef-stew’, ‘Irish Stew’ ) ); // ID が 17、スラッグが “beef-stew”、またはタイトルが “Irish Stew” のいずれかにあてはまる投稿が表示中。

投稿のIDで指示するのがわかりやすいですね。

投稿IDならば、’100,120′  とか複数も指定することが可能ですね。

 

複数記事の指定には「array」

複数のカテゴリを指定する場合は、「array」を使います。「array」を使うと複数の投稿IDにスキンを表示することができます。

 

arrayとは英語で整理するという意味があり配列関数と言われてます。
 
 

投稿IDの調べ方

wordpressの管理画面から、投稿一覧を表示させます。

  1. 投稿記事の所にマウスの先端を合わせます。
  2. 下にptst=****と表示されている部分が投稿IDとなります。

以下の例では、947になります。

 

下書きの時に記事IDを調べておいて、スキンを適用させた状態もプレビューで見ることは可能です。

 

フォーラムで教えて貰った、わいひらさんの子テーマのfunctions.phpは以下になります。
function get_skin_url(){
  $skin_file = get_theme_option(OP_SKIN_URL, '');
  if (is_single('m-sora')) {
    $skin_file = get_template_directory_uri().'/skins/m-sora/style.css';
  } elseif (is_single('itsumono-skin')) {
    $skin_file = get_template_directory_uri().'/skins/skin-ganchan02/style.css';
  } elseif (is_single('odekake')) {
    $skin_file = get_template_directory_uri().'/skins/skin-ganchan11/style.css';
  } elseif (is_single(array('modernblack', '0-6-2'))) {
    $skin_file = get_template_directory_uri().'/skins/skin-modernblack/style.css';
  } elseif (is_single(array('skin-dot'))) {
    $skin_file = get_template_directory_uri().'/skins/skin-dot-winered/style.css';
  } elseif (is_single(array('0-6-4'))) {
    $skin_file = get_template_directory_uri().'/skins/skin-dot-rainyblue/style.css';
  } elseif (is_single(array('skin-mix'))) {
    $skin_file = get_template_directory_uri().'/skins/skin-mixred/style.css';
  } elseif (is_single(array('lightning-skin'))) {
    $skin_file = get_template_directory_uri().'/skins/lightning-skin/style.css';
  } elseif (is_single(array('skin-samuraiblue', '0-7-6'))) {
    $skin_file = get_template_directory_uri().'/skins/skin-samuraiblue/style.css';
  } elseif (is_single(array('skin-ganchan21', '1-0-1'))) {
    $skin_file = get_template_directory_uri().'/skins/skin-ganchan21/style.css';
  } elseif (is_single(array('skin-samuraiblue-muji', '1-0-2'))) {
    $skin_file = get_template_directory_uri().'/skins/skin-samuraiblue-muji/style.css';
  }

  return $skin_file;
}
色々な書き方があり、例を示してくれています。

 

まとめ

フォーラムでのスキンに関する質問の箇所は以下です。

cocoonフォーラム#post-4832スキンの切換えについて

これで記事毎にスキンの切換えが出来るようになりました。

記事内容によっては、スキンを切り替えて表示するとアピールになって良いと思います。

 

コメント

タイトルとURLをコピーしました