現在デフォルトスキンとして「Season(Spring)」適用中。

Cocoonテーマのスキン切り換えデモを実装する方法

カスタマイズ
この記事は約6分で読めます。

フォーラムで以下の質問をいただいたので、記事の方が書きやすいので記事として残しておこうと思います。

テーマの一時切り替え機能を実装したいと考えています。

サイドバーにある切り替え機能はどのようにして実装しているのでしょうか。

参考 テーマの一時切りかえ機能について | カスタマイズ相談

以下のコードは、あくまでサンプルですので、細かなカスタマイズ方法や、実装環境ごとの不具合についてはサポート外となりますのでご了承ください。
スポンサーリンク

カスタマイズ方法

まずは子テーマのfunctions.phpに以下のコードを貼り付けます。

add_shortcode('skin', function (){
$skin = isset($_GET['theme-switch']) ? esc_html($_GET['theme-switch']) : null;
if (empty($skin) && isset($_COOKIE['theme-switch'])) {
  $skin = esc_html($_COOKIE['theme-switch']);
}
$url = get_permalink().'?';
ob_start();
?>
<select id="theme-switch" class="theme-switch-dropdown" onchange="document.cookie = this.options[this.selectedIndex].value;window.document.location.href='<?php echo $url; ?>'+this.options[this.selectedIndex].value;">
  <option value="theme-switch=reset" <?php the_option_selected($skin, null); ?>>▼デザインスキンを選択</option>
  <option value="theme-switch=cocoon-master" <?php the_option_selected($skin, 'cocoon-master'); ?>>Cocoonデフォルト</option>
  <option value="theme-switch=skin-simplicity" <?php the_option_selected($skin, 'skin-simplicity'); ?>>Like Simplicity</option>
  <option value="theme-switch=skin-colors-red" <?php the_option_selected($skin, 'skin-colors-red'); ?>>COLORS(レッド)</option>
  <option value="theme-switch=skin-colors-blue" <?php the_option_selected($skin, 'skin-colors-blue'); ?>>COLORS(ブルー)</option>
  <option value="theme-switch=skin-colors-yellow" <?php the_option_selected($skin, 'skin-colors-yellow'); ?>>COLORS(イエロー)</option>
  <option value="theme-switch=skin-colors-green" <?php the_option_selected($skin, 'skin-colors-green'); ?>>COLORS(グリーン)</option>
  <option value="theme-switch=skin-colors-pink" <?php the_option_selected($skin, 'skin-colors-pink'); ?>>COLORS(ピンク)</option>
</select>
<?php
  return ob_get_clean();
});

function get_skin_url(){
  $ts = isset($_COOKIE['theme-switch']) ? $_COOKIE['theme-switch'] : null;
  if (isset($_GET['theme-switch'])) {
    setcookie('theme-switch',esc_html($_GET['theme-switch']),time()+60*60*24*7);
  }
  $gts = isset($_GET['theme-switch']) ? $_GET['theme-switch'] : null;
  $ts = empty($ts) ? $gts : $ts;

  switch ($ts) {
    case 'reset':
    case 'cocoon-master':
      setcookie('theme-switch','',time()+60*60*24*7);
      return;
      break;

    default:
      $path = get_template_directory().'/skins/'.$ts;
      if ($ts && file_exists($path)) {
        return esc_url(get_template_directory_uri().'/skins/'.$ts.'/style.css');
      } else {
        return  esc_url(get_theme_option(OP_SKIN_URL, ''));
      }
      break;
  }
}

skinショートコードの実装

add_shortcode(‘skin’~部分は、ウィジェットにskinショートコードでスキン切り換えのドロップダウンメニューを表示させるためのコードです。

切り替えたいスキンに合わせる形でoptionを追加してください。

<option value="theme-switch=スキンフォルダ名" <?php the_option_selected($skin, 'スキンフォルダ名'); ?>>スキンの名前</option>

get_skin_url関数

get_skin_url関数は、Cocoon独自のスキン切り換え関数です。

ドロップダウンで切り替えられた内容によって、クッキーの保存・読み込み行っています。

その読み込まれたクッキー情報により、スキンを切り替えています。

テキストウィジェットにskinショートコードを貼り付ける

functions.phpのコードの準備が整ったら、ウィジェットからショートコードを呼び出します。

テキストウィジェットなどに[skin]と記入します。

skinショートコードを貼り付ける

サイドバーにテキストウィジェットを表示させた状態がこちら。

スキン動作デモ

まとめ

こんな感じで、独自のスキン切り換えデモ機能を実装できます。

ただ今回のコードは、あくまで自分のサイト用に書いたものなので、結構雑な内容になっています。

あくまで参考程度にご利用ください。

カスタマイズ
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:2年9ヶ月

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:9ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:15年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:7ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

コメント

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