シンプルなWordPressテーマ

Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように
便利な機能を織り込んで作りました。
100%GPLテーマなので自由にご利用いただけます。

ダウンロードページはこちら。

ダウンロード

スキン内のJSONファイルでCocoon設定値を制御する方法

開発者向け

Cocoonのスキン機能では、スキンから「Cocoon設定値」を変更することができます。

設定値を変更する方法は、以下の3種類があります。

スキン制御の仕様。スキン側から「Cocoon設定値」を変更する方法3通り。
スキン側から「Cocoon設定」のオプション値を変更する手段の紹介です。スキン側から設定を変更できることで開発の手間を削減することができます。

以下では、JSONにより設定値を変更する方法の紹介です。

スポンサーリンク

主な手順

主な手順としては、こんな感じ。

  1. スキンフォルダ直下にoption.jsonファイルを作成する
  2. option.jsonを開いて設定名と値を記入する

以下で詳しく説明します。

スキンフォルダ直下にoption.jsonファイルを作成する

まずは、作成中のスキンフォルダ直下にoption.jsonというファイルを作成します。

option.json

作成したJSONファイルを「UTF-8」の文字コードが編集できるエディターで開いてください。

option.jsonを開いて設定名と値を記入する

あとは、JSONファイルに対して一行ごとに以下のように書いているだけです。

"設定名":"値",

こんな感じで。

JSONをテキストエディタで編集する

設定サンプルのコードはこちら。

{
  "site_key_color":"#19448e",
  "site_key_text_color":"#fff",
  "header_layout_type":"center_logo_slim",
  "tagline_position":"header_bottom",
  "site_font_size":"18px",
  "site_background_color":"#e6efff",
  "site_font_family":"meiryo",
  "site_font_weight":"500",
  "sidebar_position":"sidebar_right",
  "site_date_format":"Y-m-d",
  "header_area_height":"200",
  "other_analytics_head_tags":"<!-- tag -->",
  "appeal_area_display_type":"front_page_only",
  "appeal_area_height":"300",
  "appeal_area_image_url":"https://im-cocoon.net/wp-content/uploads/denim.jpg",
  "appeal_area_background_color":"#19448e",
  "appeal_area_title":"スキンから入力したタイトル",
  "appeal_area_message":"スキンから入力したアピールエリアメッセージです。",
  "appeal_area_button_message":"スキンボタンキャプション",
  "appeal_area_button_url":"https://wp-cocoon.com/",
  "appeal_area_button_background_color":"#19448e",
  "entry_card_type":"vertical_card_2",
  "entry_card_border_visible":"1",
  "category_tag_display_type":"one_row",
  "related_entry_type":"vartical_card_3",
  "related_entry_count":"9",
  "post_navi_type":"square",
  "single_breadcrumbs_position":"main_before",
  "page_breadcrumbs_position":"main_before"
}

最後の項目の「,(カンマ)」は不要なのでご注意ください。

詳細は、親テーマ内のskinsフォルダにある、「skin-demo-json」フォルダ内を参照してください。

設定名と値の取得方法

Cocoon設定の「設定名」と「値」を取得する方法について説明します。

まずはCocoon設定を開きます。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

Cocoon設定画面でF12キーをしてデベロッパーツールを開きます。

Cocoon設定上でDeveloperツールを開く

調査用のカーソルを入力フォームに合わせます。

調査カーソルを入力フォームに合わせる

すると、デベロッパーツール上で以下のように表示されるので、「設定名(name)」と「値(value)」を取得します。

デベロッパーツールで名前と値を取得する

例えば、「サイトフォント」の設定を「Rounded Mplus 1c(WEBフォント)」に設定するのであれば、以下のように取得します。

  • 設定名(name):site_font_family
  • 値(value):rounded_mplus_1c

あとはこれらの文字列を、設定ファイルに書き込んでいくだけです。

チェックボックスの場合

例えばチェックボックスの場合は、こんな感じ。

チェックボックスの設定値を取得する

有効の場合は1。無効の場合は0にします。

ラジオボタンの場合

ラジオボタンの場合は、設定したいラジオボタンを「調査カーソル」で選択し、設定名と値を取得してください。

ラジオボタンの場合

カラーピッカーの場合

色などを選択する場合は、カラーピッカーの設定値を取得しカラーコードを入力します。

カラーピッカーの設定名を取得

テキスト入力ボックスの場合

エキスと入力ボックスの場合も、設定名を取得して値を書き込んでください。

テキストにレヴボックスの場合

まとめ

JSONは何かと設定ファイルに利用される形式です。

僕が使っているコードエディターのSublime Textも、VS CodeもJSON形式で設定を編集することができます。

なので、慣れている人はJSON形式でCocoon設定値を変更すると楽かもしれません。

開発者向けスキン
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
わいひら

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

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

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

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
〇アダルト・出会い系サイト可
△安定性にやや欠ける

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

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

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

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

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

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

Cocoon

コメント