この間記事を書いていて、少し文字を目立たせたいと思って調べていたら、WordPressのCocoonテーマにはカスタムテキストという便利機能があることに気づいたので使い方を解説します。多分最近搭載された機能だからか、記事があまり見つかりませんでした。
カスタムテキスト…？ちょっと文字を装飾したいだけなのに難しそう。
cssを使うけど、一回登録すればボタン１クリックで簡単に使えます・・・
この記事は、WordPress：Cocoonテーマで、カスタムテキストを使って文字装飾をする方法についての初級者向けの記事です。
難易度
カスタムテキストで何ができるの？
こういうやつです。
●●について解説するよ！
◇◇1について…説明内容
◆◆２について…説明内容
◇◇3について…説明内容
◆◆4について…説明内容
◆◆5について…説明内容
画像のように、段落で文章を入力するときに色を変えたり、太くしたりしたいときに使う装飾ボタン下にカスタムテキストというボタンがあります。ここに自分で装飾を登録することができます。
自分がいろんな色の背景色つき装飾が欲しいのはジオメトリーノードの説明のためですが、これがあれば、欲しい色のバリエーションを簡単に増やせます。（ただ残念ながら編集中はどういう装飾がついてるか見えません…これがあれば完璧なんだけど）
カスタムテキストを追加CSSでカスタマイズ
管理画面のメニューで 外観 ＞ カスタマイズ ＞ 追加CSS
ここでクラスを.cocoon-custum-text-1とすることで登録できます。（数字のところは１，２と増やしていってください）
例：カスタムテキスト１ カスタムテキスト２
/* custum text */
/* black */
.cocoon-custom-text-1{
border-radius: .2em;
padding: .1em .4em;
font-size: .9em;
font-weight: normal;
color: white;
background-color: #333333;
}
/* red */
.cocoon-custom-text-2{
border-radius: .2em;
padding: .1em .4em;
font-size: .9em;
font-weight: normal;
color: white;
background-color: #DC143C;
}カスタムテキストの数を増やしたい
現時点では2種類しか登録できないので、カスタムテキストの登録数を増やします。
管理画面メニューの 外観 ＞ テーマファイルエディター に入ってください。
※functions.phpというファイルをいじりますが、間違うとバグって動かなくなることがあるので慎重に、確認しながらやってください。
①編集するテーマを選択：Cocoon Child を選択してください。Cocoonだけのものは違います。
②Styelsheet下のTheme Functions(functions.php) を選んでクリック。この下にもskinsの下にfunctions.phpというファイルがあるけどそれは違います。
③ファイルの内容を見ると、いろいろ書いてあると思いますが、//以下に子テーマ用の関数を書く と書いてある行があると思いますので、その下に以下のコードを追記します。
//カスタムテキストメニューの数を増やす
add_filter('cocoon_custom_text_count', function ($count){
$count = 10;
return $count;
});これはカスタムテキストを10個に増やします。個数は何個でも好きなように変えてください。
cocoon_custom_text_count フックを利用しています。PHPですが、別に知らなくてもこれを追記するだけでOKです。
これをコピペ（書くと間違えるのでコピペ推奨）したら、下のファイルを更新ボタンを押します。
これで自分の好きなように文字を装飾できる機能を何個でも追加できます。
編集画面でもスタイルを適用させたい
やはり編集画面でもちゃんとスタイルが適用されてほしい、と思い調べてみたら簡単に編集画面にもcssスタイルを当てる方法がありました。
cocoonのテーマファイルエディターにいき、Cocoon Childの、Visual Editor Stylesheetってかいてあるファイルに、編集画面用のCSSを書くスペースがあります。カタカナでビジュアルスタイルシートって書いてあるときもあるんですが、下にeditor-syle.cssって書いてあるものを選択してください。
ここに、さきほどのcssをそのままコピペします。
これで簡単に編集画面でもスタイルが当たって、わかりやすくなりました！！
