Webプロデューサー 松前 浩志 追記：ダメぽ・・・
下記のプラグインダウンロードの方法でブロックリンク機能は使えるには使えますが、ブロックエディターにてエラーが出現（泣）
ってことで、他の方法で。
ボタンブロックで制作
このようななんちゃってブロック全体リンクがボタンブロックでできます
手順
WordPress ブロックエディター 左側：ボタンブロック
↓
文字を入れる
画像を入れたい場合は、インライン画像を入れる
↓
リンク付けて終わり
まぁ、シンプルで簡単だけれど、プロとしては邪道な感じがしてイマイチ・・・ですね。
まぁ、できれば良いかって感じでもあります。
しゃーないっすよね。
マウスオーバー時のアクションや「テスト」って文字の中央揃えはブロックではできないっぽいので、CSSでカスタマイズしてね。
面倒ならAIに聞けば作ってくれます。
文字にCSS名「.button-ttl」など適当に付けてさ。
.button-ttl {
margin-top: 0 auto!important;
text-align:center!important;
}却下：このようなブロックリンク機能を付けることができます
ここから下の内容はボタンのブロックで制作できない、かつ、エラーが出現しても気にしないよって方は読んでみてください。
一応、削除せずに記事は残しておきます。
目的
EditorsKitのリンク機能が無くなってしまった＆重いので、別の方法でカラムやカバー全体にリンクが効くようにすること。
試行錯誤
WordPressプラグイン「EditorsKit」ではブロックにリンクを付けるためだけに使っていました。
しかーし！
2024年10月時点ですが、突然使えなくなりました、表示・出現されなくなりました（泣）
そこで、別の方法として「Atomic Blocks」「Stackable」を試したがダメ。
よーわからん。
・直感的に使えない・・・UI/UXでだいぶ損しているなと思う
・他の機能が盛りだくさん＝重くなる ので不要。ブロックにリンクを付けるだけで良いので
・今後プラグインのアプデで消えると思うと怖い((((；ﾟДﾟ))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ
ってことで、先人たちのお知恵をお借りして、改善の改善の改善したものを自作しました！
コピペで使えるようにしているので、同じ用に困っている人がいたらぜひ活用してみてください。
そして、この機能を見る度に私「Webプロデューサー 松前」のことを思い出してくださいｗ
先人が作ったプラグインをダウンロードしてアップ
上記のサイトから「ダウンロード(zip)」の青い大きなボタンを押してダウンロードDL
↓
WordPress管理画面から、新規プラグインを追加 ＞ ファイル選択 ＞ アップロード
プラグインを改善カスタマイズ
左側：プラグイン ＞ プラグインファイルエディター
↓
右上：Custom Cover Link 選択
custom-cover-link.php
上記のサイトから拝借させていただきます。
本当にありがとうございます！
custom-cover-link.php を選択して、下記のコードをコピペ ＞ 下のボタンで保存
custom-cover-link.php
<?php
/*
Plugin Name: Custom Cover Link
Description: Extends the core Cover block to add a custom link.
Version: 1.0
Author: calcs
*/
function enqueue_custom_block_editor_assets() {
wp_enqueue_script(
'custom-cover-link',
plugin_dir_url(__FILE__) . 'custom-cover-link.js',
array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-block-editor'),
filemtime(plugin_dir_path(__FILE__) . 'custom-cover-link.js'),
true
);
wp_enqueue_style(
'custom-cover-link-style',
plugin_dir_url(__FILE__) . 'custom-cover-link.css',
array(),
filemtime(plugin_dir_path(__FILE__) . 'custom-cover-link.css')
);
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_block_editor_assets');
function enqueue_custom_block_frontend_assets() {
wp_enqueue_style(
'custom-cover-link-style',
plugin_dir_url(__FILE__) . 'custom-cover-link.css',
array(),
filemtime(plugin_dir_path(__FILE__) . 'custom-cover-link.css')
);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_block_frontend_assets');
function add_block_link($block_content, $block) {
// カバーブロックの場合
if ('core/cover' === $block['blockName'] && isset($block['attrs']['link'])) {
$link = $block['attrs']['link'];
if (!empty($link)) {
$block_content = '<a href="' . esc_url($link) . '" class="cover-link">' . $block_content . '</a>';
}
}
// グループブロックの場合
if ('core/group' === $block['blockName'] && isset($block['attrs']['link'])) {
$link = $block['attrs']['link'];
if (!empty($link)) {
$block_content = '<a href="' . esc_url($link) . '" class="group-link">' . $block_content . '</a>';
}
}
// カラムブロックの場合
if ('core/column' === $block['blockName'] && isset($block['attrs']['link'])) {
$link = $block['attrs']['link'];
if (!empty($link)) {
$block_content = '<a href="' . esc_url($link) . '" class="column-link">' . $block_content . '</a>';
}
}
return $block_content;
}
add_filter('render_block', 'add_block_link', 10, 2);custom-cover-link.css
.cover-link:has(.wp-block-cover) {
display: block;
}
a.column-link:hover {
opacity: 0.6;
}カラム全体にリンクを貼っているのに、マウスオーバーしたら画像にしかマウスオーバーアクションがなかったので、文字にもアクションが効くように改善。
と言っても少々透明にするだけなのですがｗ
それでも上に画像、下に文字のカラムデザインの場合、やはりマウスオーバーしたら画像だけ半透明で、文字だけ何もアクションが起こらないのは寂しいですよね。
その配慮です。
上段のCSSはカラムではなく、ブロックエディタのカバーで何か必要だと思いますので、残しておきます。
先人がせっかく制作してくれましたので、敬意を込めてって意図もありますm(_ _)m
custom-cover-link.js
(function(wp) {
const { registerBlockType } = wp.blocks;
const { createHigherOrderComponent } = wp.compose;
const { InspectorControls, __experimentalLinkControl } = wp.blockEditor;
const { PanelBody, ToolbarButton, Popover, Button } = wp.components;
const { Fragment, useState, createElement } = wp.element;
// リンク機能を拡張する共通の関数
const withCustomLink = (BlockEdit, blockType) => {
return (props) => {
if (props.name !== blockType) {
return createElement(BlockEdit, props);
}
const { attributes: { link }, setAttributes } = props;
const [isLinkPickerOpen, setIsLinkPickerOpen] = useState(false);
const openLinkPicker = () => setIsLinkPickerOpen(true);
const closeLinkPicker = () => setIsLinkPickerOpen(false);
const removeLink = () => {
setAttributes({ link: '' }); // リンクを空に設定
};
return createElement(
Fragment,
null,
createElement(BlockEdit, props),
createElement(
InspectorControls,
null,
createElement(
PanelBody,
{ title: 'リンク設定' },
createElement(
ToolbarButton,
{
icon: 'admin-links',
label: 'リンクを編集',
onClick: openLinkPicker,
}
),
isLinkPickerOpen && createElement(
Popover,
{ position: "middle center", onClose: closeLinkPicker },
createElement(
__experimentalLinkControl,
{
value: { url: link },
onChange: (value) => setAttributes({ link: value.url }),
}
)
),
link && createElement(
Button,
{
isDestructive: true,
onClick: removeLink,
},
'リンクを削除'
)
)
)
);
};
};
// カバーブロックの拡張
const withCustomCoverLink = createHigherOrderComponent(
(BlockEdit) => withCustomLink(BlockEdit, 'core/cover'),
'withCustomCoverLink'
);
// グループブロックの拡張
const withCustomGroupLink = createHigherOrderComponent(
(BlockEdit) => withCustomLink(BlockEdit, 'core/group'),
'withCustomGroupLink'
);
// カラムブロックの拡張
const withCustomColumnLink = createHigherOrderComponent(
(BlockEdit) => withCustomLink(BlockEdit, 'core/column'),
'withCustomColumnLink'
);
// フィルターフックに追加
wp.hooks.addFilter(
'editor.BlockEdit',
'custom/with-custom-cover-link',
withCustomCoverLink
);
wp.hooks.addFilter(
'editor.BlockEdit',
'custom/with-custom-group-link',
withCustomGroupLink
);
wp.hooks.addFilter(
'editor.BlockEdit',
'custom/with-custom-column-link',
withCustomColumnLink
);
// ブロック保存の修正
const withCustomSave = (element, blockType, attributes) => {
if (blockType.name !== 'core/cover' && blockType.name !== 'core/group' && blockType.name !== 'core/column') {
return element;
}
const { link } = attributes;
if (!link) {
return element;
}
const className = blockType.name === 'core/cover' ? 'cover-link' : blockType.name === 'core/group' ? 'group-link' : 'column-link';
return createElement(
'a',
{ href: link, className: className },
element
);
};
wp.hooks.addFilter(
'blocks.getSaveElement',
'custom/with-custom-save',
withCustomSave
);
})(window.wp);いざ、実践！
固定ページまたは記事投稿ページ ブロックエディタ 左側：カラム に適当に画像と文字をぶち込む
↓
これで、右側にリンクが出現しているので、リンクを付けることができるようになりました！
おめでとうございます（＾ω＾）
削除
なんと、リンク削除機能もあります！
メッセージ
以上、地味でマイナーな機能ですがWeb制作者である以上、必要ですよね。
むしろ、デフォルトでテーマに機能実装して欲しいですよね。
今まで少なく見積もっても100サイト以上は制作してきましたが、結構ブロック全体にリンクを付ける機会は多いんです。
画像と文字など別々にイチイチリンク付けても悪くはないのですが、リンクの数が増えますし、マウスオーバーでる＞でない＞でる でダサいっすよね～
同じ用に困っている誰かの約に立てたら幸いです！
それではまた！
＼Webで売上アップしたい／
＼ Webで売上アップしたい・Web制作スキルアップしたい ／
そう思っているなら、
無料で一度相談してみませんか？
そう思っているなら、
無料で一度相談してみませんか？
