![Cocoonで使える[ショートコード]のオプションと使い方まとめ](https://web.monogusa-note.com/wp/wp-content/uploads/2019/03/eyecatch-cocoon-shortcode.png)
【おまけ】WordPress標準で使えるショートコード
ビジュアルエディターを利用していればエディター上の設定で操作出来るのでオプションの書き方は意識せずに利用出来るかと思います。
ギャラリー表示
メディアに投稿されている画像をギャラリー表示できます。
- ショートコード(基本形)
-
[gallery]
- サンプル
-
-
- オプション
-
属性 説明 記述方法 初期値 ids 表示する画像ID
※エディター上で作業すれば自動で指定してくれる数値(整数) orderby 画像の表示順序の基準 menu_order / title / post_date / rand / ID
(手動並べ替え/ライブラリタイトル/日付/ランダム/ID)menu_order ID order 表示順のソート ASC / DESC (昇順/降順) ASC columns カラム数を指定 数値(整数)
0の場合: 改行タグが挿入されない3 id 投稿IDを指定。指定した投稿に添付された画像を表示する 数値(整数)※複数の場合カンマで区切る
指定なし: 現在の投稿が対象になる(空欄) size 画像のサイズを指定 thumbnail / medium / large / full
(＋add_image_size()で登録したサイズ)thumbnail itemtag 画像とキャプションを囲むタグを指定 HTMLタグ名 dl icontag ギャラリーの画像を囲むタグを指定 HTMLタグ名 dt captiontag キャプションを囲むタグを指定 HTMLタグ名 dd link 画像のリンク先 file / none
(画像ファイルいに直接リンク/リンクなし)添付ファイルのパーマリンク include 表示したい添付画像のIDを指定 数値(整数)※複数の場合カンマで区切る (空欄) exclude 表示したくない添付画像のIDを指定
※includeの値が優先されます数値(整数)※複数の場合カンマで区切る (空欄)
画像にキャプションを付ける
画像の下にキャプション(テキスト)を併記する
- ショートコード(基本形)
-
[caption]<img> キャプション[/caption]
- サンプル
-
にゃおー！
- オプション
-
属性 説明 記述方法 初期値 id HTMLタグのID属性を指定 idで使用できる英数字 (空欄) class HTMLタグのclass属性を指定 classで使用できる英数字 (空欄) align キャプションの整列 alignnone / aligncenter / alignright / alignleft
(指定なし/中央寄せ/右寄せ/左寄せ)alignnone width キャプションの幅をピクセス数で指定(必須) 数値(整数) (空欄)
オーディオ埋め込み
音声ファイルを埋め込み表示する
- ショートコード(基本形)
-
[audio]
動画の埋め込み
動画ファイルを埋め込み表示する
- ショートコード(基本形)
-
[video]
プレイリストを表示
- ショートコード(基本形)
-
[playlist]
埋め込み
埋め込んだ動画等のサイズを指定
- ショートコード(基本形)
-
[embed width="XXX" height="XXX"]https://URL[/embed] - メモ
-
Cocoonではショートコードでのサイズ指定は効かないようです。
コメント
Hello こんにちは,
I want to know how to do tab wrap.
https://i.imgur.com/Ih74qEN.png
Sorry, my Japanese is not good.
Please teach me.
Hello こんにちは！
そのタブ切り替えは独自にカスタマイズしたものです。
The tab switching is customized by oneself.
少し複雑なHTMLになりますが解説させていただきます。
It will be a little complicated HTML, but I will explain.
英語で伝える事が難しいため日本語の後にGoogle翻訳で翻訳した英語を記載します。
As it is difficult to communicate in English, I will write English translated with Google Translate after Japanese.
まずCocoonの子テーマのstyle.cssに以下のCSSをコピペしてください。
First, copy and paste the following CSS into style.css of Cocoon Child theme.
.tab-container { border-top: 3px solid #68a6c5; } .tab-content { height: 0; overflow: hidden; transition: opacity .8s; opacity: 0; } .tab-label { color: #fff; background: #cbcfd2; padding: 3px 12px; display: inline-block; font-size: 14px; position: relative; text-shadow: 0 -1px 0 rgba(0,0,0,.2); } .tab-label:before { content: ''; border-top: 10px solid #fff; border-left: 10px solid rgba(0, 0, 0, .25); position: absolute; top: 0; right: 0; box-shadow: 0 0 1px rgba(255,255,255,.3); } .tab-label:hover:before { border: none; } .tab-checkbox:checked+.tab-label { background: #68a6c5; } .tab-checkbox:first-of-type:checked~.tab-container>.tab-content:first-of-type, .tab-checkbox:last-of-type:checked~.tab-container>.tab-content:last-of-type, .tab-checkbox:nth-of-type(2):checked~.tab-container>.tab-content:nth-child(2), .tab-checkbox:nth-of-type(3):checked~.tab-container>.tab-content:nth-child(3), .tab-checkbox:nth-of-type(4):checked~.tab-container>.tab-content:nth-child(4){ height: auto; opacity: 1; } .tab-checkbox, .tab-label+br, .tab-wrap p:empty { display: none; }１つのタブ切り替えに、５つまでのタブが使えます。
Up to 5 tabs can be used in one tab switch.
５つ以上利用する場合次のように数字を増やしたコードを追加する必要があります。
If you use 5 or more, you need to add the code which increased the number as follows.
次に、ブロックエディタの場合カスタムHTMLブロック（クラシックエディタの場合テキストモード）に、以下のHTMLをコピペして利用してください。
Next, copy and use the following HTML in a custom HTML block (text mode in the classic editor) for block editor
<div class="tab-wrap"> <input id="TAB01-01" type="radio" name="TAB-01" class="tab-checkbox" checked="checked" /><label class="tab-label" for="TAB01-01">Button 1</label> <input id="TAB01-02" type="radio" name="TAB-01" class="tab-checkbox" /><label class="tab-label" for="TAB01-02">Button 2</label> <input id="TAB01-03" type="radio" name="TAB-01" class="tab-checkbox" /><label class="tab-label" for="TAB01-03">Button 3</label> <div class="tab-container"> <div class="tab-content"> Contents 1 </div> <div class="tab-content"> Contents 2 </div> <div class="tab-content"> Contents 3 </div> </div> </div><input>のname属性はすべて同じ名前にする必要があります。All “
nameattribute” of<input>must be the same name.一行の
<input>と<label>のタグはid属性とfor属性を同じ名前にしてください。Make sure that the tags for
<input>and<label>in one line have the same name for “idattribute” and “forattribute”.もし同じページ内で複数のタブ切り替えを利用したい場合は、
name属性・id属性・for属性に別の名前を付ける必要があります。If you want to use multiple tab switching in the same page, you need to give different names to “
nameattribute”, “idattribute” and “forattribute”.例えば次のような感じです。
For example, it looks like the following.
<div class="tab-wrap"> <input id="TAB02-01" type="radio" name="TAB-02" class="tab-checkbox" checked="checked" /><label class="tab-label" for="TAB02-01">Button 1</label> <input id="TAB02-02" type="radio" name="TAB-02" class="tab-checkbox" /><label class="tab-label" for="TAB02-02">Button 2</label> <input id="TAB02-03" type="radio" name="TAB-02" class="tab-checkbox" /><label class="tab-label" for="TAB02-03">Button 3</label> <div class="tab-container"> <div class="tab-content"> Contents 1 </div> <div class="tab-content"> Contents 2 </div> <div class="tab-content"> Contents 3 </div> </div> </div>コードの実行サンプルはこちらのページで公開しました。
A code execution sample has been published on this page.
https://codepen.io/kusamura_mono/pen/WqQEpz
また、このタブ切り替えはこちらのページを参考にしてカスタマイズしたものです。
In addition, this tab switching is customized referring to this page.
https://bagelee.com/design/css/create_tabs_using_only_css/
参考になれば幸いです。
I’m glad if you can use it as a reference.
コメントありがとうございました！
Thank you for your comment!
Hello 草村,
Thank you for teaching me these! (｡◕∀◕｡)
But I am currently experiencing problems
I want to put the Tab-warp in the Sidebar (サイドバー).
But it seem doesn't work
The reason is that there will also be the same Tab-warp in .mobile-menu-buttons
Do you have a solution to this problem?
こんにちは！
片方の
checked属性が無効化されるのが原因みたいですね。CSSを以下のコードに変更すれば、初期状態で最後のタブをアクティブに出来ます。
仕様上、最初のタブをアクティブにする事は難しいです。
Hello!
It seems that the cause is that one “
checkedattribute” is invalidated.You can activate the last tab by default by changing the CSS to the following code.
By design, it is difficult to activate the first tab.
.tab-container { border-top: 3px solid #68a6c5; } .tab-content, .tab-checkbox:checked~.tab-container>.tab-content:last-of-type { height: 0; overflow: hidden; transition: opacity .8s; opacity: 0; } .tab-label, .tab-checkbox:checked~.tab-checkbox:last-of-type+.tab-label { color: #fff; background: #cbcfd2; padding: 3px 12px; display: inline-block; font-size: 14px; position: relative; text-shadow: 0 -1px 0 rgba(0,0,0,.2); } .tab-label:before { content: ''; border-top: 10px solid #fff; border-left: 10px solid rgba(0, 0, 0, .25); position: absolute; top: 0; right: 0; box-shadow: 0 0 1px rgba(255,255,255,.3); } .tab-label:hover:before { border: none; } .tab-checkbox:checked+.tab-label, .tab-checkbox:last-of-type+.tab-label { background: #68a6c5; } .tab-content:last-of-type, .tab-checkbox:first-of-type:checked~.tab-container>.tab-content:first-of-type, .tab-checkbox:last-of-type:checked~.tab-container>.tab-content:last-of-type, .tab-checkbox:nth-of-type(2):checked~.tab-container>.tab-content:nth-child(2), .tab-checkbox:nth-of-type(3):checked~.tab-container>.tab-content:nth-child(3), .tab-checkbox:nth-of-type(4):checked~.tab-container>.tab-content:nth-child(4){ height: auto; opacity: 1; } .tab-checkbox, .tab-label+br, .tab-wrap p:empty { display: none; }初期状態のアクティブなタブがサイドバーとモバイルスライドインで一致しなくなるので、HTMLの
checked="checked"は削除していいかもしれません。You may want to delete the HTML
checked = "checked", as the initial active tab will not match in the sidebar and mobile slide-in.Sample : https://codepen.io/kusamura_mono/pen/OeMmBr
▼もし左のタブをアクティブに見せたい場合以下のコードを追加すれば、最後のタブを左に移動できます。
※調整が必要になるかもしれません。
If you want the left tab to appear active, you can move the last tab to the left by adding the following code.
*Adjustment may be necessary.
.tab-wrap { display:flex; flex-wrap:wrap; } .tab-label { margin-right:.5em; } .tab-label:last-of-type { order:-1; } .tab-container { width:100%; }Sample : https://codepen.io/kusamura_mono/pen/PrZmxx
お試しください。
Please try it.
Hello~ 草村,
Thank you so much!! ヽ(●´∀`●)ﾉ
According to your teaching, I successfully show the Tab-warp in sidebar (サイドバー).
You can see the GIF right here:
https://i.imgur.com/FISQhHn.gifv
Very grateful, I think this can be used as a great tutorial posts.
こんにちは！
上手くいったようでよかったです！
質問やご報告を画像で伝えてくださったのでわかりやすかったです。
お役に立てて嬉しいです。
コメントありがとうございました！
Hello!
I’m glad it went well!
It was easy to understand, as we communicated the questions and reports in the form of images.
I’m glad to help you.
Thank you for your comment!
大変参考になりました！
ちなみに吹き出しのショートコードはありますか？
くーとさん
こんにちは。
現時点でCocoonに吹き出しショートコードは存在しないかと思います。
ショートコードはありませんが吹き出し機能はありますので、下記ページを参考に利用してみてください。
自作の吹き出しを作成して利用する方法 | Cocoon
https://wp-cocoon.com/how-to-use-speech-balloon/
ブロックエディタ(Gutenberg)をお使いでしたら「吹き出しブロック」も使えますよ。
Cocoon 1.7.0公開。吹き出しブロックの追加。 | Cocoon
https://wp-cocoon.com/1-7-0/
不明な点があればCocoon公式サイトで一度「吹き出し」等のワードで検索してみるとヒントが見つかるかもしれませんのでお試しくださいませ。
コメントありがとうございました！
Hello~ こんにちは,
long time no see! 久しぶり(*´▽`*)
I found that your この記事の目次 has added a quick jump to コメント function!
https://i.imgur.com/XVmvumi.png
Can teach me how to do it? 🙂 Thanks
Hello! こんにちは！
目次にコメントへジャンプするリンクを追加するには、
以下のコードを子テーマの functions.php にコピペすればOKです。
functions.phpを操作する前に、エラーが発生しても復旧できるようにバックアップをとってください。
To add a link that jumps to a comment in the table of contents,
Copy and paste the following code into functions.php of the child theme.
Before operating functions.php, make a backup so that you can recover even if an error occurs.
add_filter( 'get_toc_tag', function( $html ){ $count = get_comments_number(); if( $count ) { $comment = '<div class="toc-comment"><a href="#comments"><i class="fa fa-comment-o" aria-hidden="true"></i> <span class="toc-comment-caption">コメント</span><span class="toc-comment-count">(' . $count . ')</span></a></div>'; $html = preg_replace( '{(</div>\s*</div>$)}', $comment.'$1' , $html ); } return $html; } );※コメントが0件の場合は表示されません。
※
if（$ count）{と、6行目の}を削除すればコメントが0件でも表示されます。お試しください。
* It is not displayed when there are 0 comments.
* If you delete
if ($ count) {and}on the 6th line, even 0 comments will be displayed.Please try it.
Hi 草村,
Thanks you so much!
This is a great and practical feature ❤️
It work prefect 😊
—-(Google 翻訳)—-
こんにちは草村、
本当にありがとうございます！
これは素晴らしい実用的な機能です❤️
上手く動いたようでよかったです！
コメントありがとうございました！
I’m glad it worked!
Thank you for your comment!
はじめまして！Cocoonのショートコードを調べていて検索からやってきました、necoと申します。
ショートコードに関する疑問は全てこちらで解決したのですが（大変参考になりました…！ありがとうございます！）、こちらの記事で「new_listのオプション」や「popular_listのオプション」で使用されている表の一部を隠す方法も探しておりまして、よろしければhow toの記事作成またはご教授いただくことをご検討できないでしょうか？
通りすがりな上、不躾なお願いで申し訳ありません。
ご検討のほど、よろしくお願いします！
necoさん
はじめまして、こんにちは！
ご質問の件ですがちょっと今すぐに詳しい解説を記事に出来そうにないので、
以前コメント外で同様の質問を受けた際に回答した内容になりますが、こちらを回答とさせていただきます。
コードはCodepenに掲載していますので、そちらをご覧ください。
【詳細折りたたみボックス】
https://codepen.io/kusamura_mono/pen/PoqQzKK
WordPressをご利用でしたら、CSSを子テーマのstyle.cssにコピペして
HTMLは「コンテンツ・・・」の部分を折りたたみたい内容に置き換えてご利用ください。
※同じページで複数使用する場合「”DATAILS-01″」(idとfor)を他と被らない名前に書き換えてください。
(例: 「id=”DATAILS-02″」「for=”DATAILS-02″」)
※1つの詳細折りたたみボックスの「id」と「for」は同じ名前を指定してください。
HTMLはクラシックエディタを利用している場合は「テキストモード」で、
ブロックエディタの場合は「カスタムHTMLブロック」か「クラシックブロック」の”HTMLで編集”で使えると思います。
また、「続きを読む css」あたりで検索すれば似たような事が出来る記事が見つかるかもしれませんので
そちらも参考にすると良いかと思います。
以上、参考になれば幸いです。
コメントありがとうございました！
夜分遅くに失礼いたします。necoです。
教えていただいた内容でチャレンジしてみたところできました！
ずっと色々試していたんですが初心者なもので難しくてできず…やっとできて感動です！！
コード見せていただき、詳しいご説明もとても助かりました。ありがとうございます。
これからもブログ参考にさせていただきます。
ありがとうございました！☺️
necoさん
結果のご報告ありがとうございます。
上手く実装出来たようで安心しました。
お役に立ててよかったです！(*^^*)
はじめまして、LaLaと申します。
こちらのcocoonショートコードの記事、とても詳しくて大変参考になっております。ありがとうございます。
不躾な質問で恐縮ですが、new_listやpopular_listのタイトル文字数を指定した文字数分だけ表示して、最後に『…』を入れて制限する事は可能でしょうか？
functions.phpに色々と記述をして試しているのですが、上手くいかなくて…
厚かましいお願いではございますが、もし可能であればその方法を教えていただけないでしょうか。よろしくお願いいたします。
上記のショートコードの件解決しました。
お願いの方大変失礼いたしました。
これからも記事を参考にさせていただきます。ありがとうございました。