簡単に、表中にリンクボタンを追加する方法

Cocoon 2.7.2でサポート

Cocoonには、以前から「ボタンブロック」や「囲みボタンブロック」などのボタン機能はありました。ただ、文中や表の中にボタンを作成することができなかったので「インラインボタン機能」を追加しました。インラインボタン機能の使い方まずは以下のよう...

はじめに
完成イメージ
実装手順
さいごに

はじめに

「テーブル」ブロックの仕様上、「ボタン」ブロックなど他のブロックを直接挿入することはできません。

そこで、WordPressの標準機能を活用して、テーブル内にリンクボタン風の要素を簡単に追加すます。

GutenbergエディターとシンプルなCSSを組み合わせることで、初心者でも手軽に実装できます。

この記事では、この方法について説明します。

完成イメージ

A	B
公式フォーラム	公式フォーラム

実装手順

以下の手順で実装します。

ラベル
Gutenvergエディターでの設定（テキストリンク入力）
Gutenbergエディター

以下の手順で作成します。
1. テーブル中のテキストを選択します。
2. 「リンク」を選択します。
3. リンク先のURLを入力します。
ラベル
Gutenvergエディターでの設定（ハイライト設定）
Gutenbergエディター

Gutenbergエディター

以下の手順でボタンの背景色を設定します。
1. リンクテキストを選択し、ハイライトを選択します。
2. パレットの背景を選択し、ボタンの背景色を設定します。
手順には順序があります。
必ずテキストリンクを入力した後に、ハイライト設定を行ってください。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

table mark {
  border-radius: 4px;
  display: inline-block;
  line-height: normal;
  padding: 7px 13px;
  transition: all 0.3s ease-in-out;
}

table mark:hover {
  opacity: 0.7;
}

table mark + .anchor-icon {
  display: none;
}

さいごに

今回紹介した方法を使えば、「テーブル」ブロックに簡単にボタンを追加できます。
この方法はWordPressの標準機能を活用しているため、他のテーマでも利用可能です。