ブロックエディタの標準的な使い方では、こういう処理が出来ないので少し工夫します。
カスタムHTMLを使ってリンクのHTMLを記述します。
サンプル
このブロックの設定とリストビューはこちらです。

カラム全体に高度な設定の追加CSSクラスに linkbox を指定します。カスタムHTMLには、サンプルとして google.co.jp へリンクを入れています。
上記Code Penからそのまま流用します。
/*div要素全体にリンクをつけるために必要な要素*/
.linkbox {
position: relative;
}
.linkbox a {
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
}
/* 以下見た目をわかりやすくするための設定*/
.linkbox {
border: solid 2px #000000;
}
.linkbox a:hover{/* マウスオーバー時に色変更*/
opacity: 0.1;
background-color: ##e7e7e7;
}この手法は都度リンクするので、記事一覧などのクエリーの中では使えません。
クエリーループで使う場合を考えてみます。クエリーループの場合は出力されるブロックが決っているので、以下のような方法を考えてみました。
クエリーループの例

クエリーループからのリストビューです。
続きを読むが表示されてしまうので、そのまま表示させた場合はこちらの画像の様になります。

「続きを読む」が表示されてしまった形になったので、次にタイポグラフィでサイズカスタムで0pxに設定します。

クエリーループの設定まとめ
クエリーループの完成サンプル
という事で、クエリーループの中でもブロック全体でリンクを行う事が出来ました。
]]>
画像ブロックの高度な設定>追加CSSクラスに img-hover-zoom を指定して、次のCSSを記述するだけです。
.img-hover-zoom {
overflow:hidden; //これを記述することではみ出た部分を非表示にします。
}
.img-hover-zoom img {
transition:1s all;
}
.img-hover-zoom img:hover {
transform:scale(1.2,1.2);
transition:1s all;
}画像のサイズなどはブロックエディタで指定が可能ですが、枠線・角丸には対応出来ていません。CSSの方も変更が必要になります。(要調査)
とはいえ簡単に使えるので、覚えておくと良いと思います。
WebPは、ウェブページの表示速度を向上させるための有効な手段の一つです。ファイルサイズを削減することで、ユーザー体験の向上やSEO効果の向上、そしてサーバーへの負担軽減に貢献します。ただし、非対応環境への対応や、WebP画像の変換作業が必要となるため、導入前にメリットとデメリットを考慮する必要があります
デメリットもあるので、対応させるのかの判断は別として紹介します。
WebPフォーマットの画像がWebサイトには適してるという話。で、対応してみたという話。
「Modern Image Formats」
作者が WordPress Performance Team という事で、何やらwordpressに組み込む機能をプラグインとして開発してってGOが出たらwordpressに組み込んで行くぞ。
という感じで公開してるプラグインです。
プラグインをインストールして有効化します。
終わり。シンプル!
あとは、画像をアップロードしたら自動的にwebp形式に変換してくれます。
アップロードが終わってから変換するので、アップロード時間が少し長くなるくらい。普通にwordpress内の画像として使える様になります。
サーバーが遅かったり、画像の多いサイトとかは画像ファイルのサイズダウンで効果があります。
WebP形式に変更する為に画像変換とかやってる人!時間の短縮になります。
ちょっと時代に乗りたい方、WebPに対応してるんだぜと自慢できるかも?です。
]]>HTMLとCSS・JSを紹介して出力画面も表示しているアレです。コードを書き換えると書き換えた内容で画面チェックが出来るので、便利です。
せっかく見つけた手法を保存するのに便利なプラグインを見つけたので紹介します。
CodePenが出してる「CodePen Embed Block」です。
実際に埋め込んだサンプルです。
web系のサイトだと必須なプラグインですね。
WordPress|固定ページや投稿ごとにCSSやJavaScriptを追加する方法
とても素晴らしい情報をシェアしてくれてありがとうございます。
※エラーが出ます。本番サイトは使わない方が良いと思います。
// Custom CSS Widget
add_action( 'admin_menu', 'custom_css_hooks' );
add_action( 'save_post', 'save_custom_css' );
add_action( 'wp_head','insert_custom_css' );
function custom_css_hooks() {
add_meta_box( 'custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high' );
add_meta_box( 'custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high' );
}
function custom_css_input() {
global $post;
echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
if ( !wp_verify_nonce( $_POST['custom_css_noncename'], 'custom-css' ) ) return $post_id;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE) return $post_id;
$custom_css = $_POST['custom_css'];
update_post_meta( $post_id, '_custom_css', $custom_css );
}
function insert_custom_css() {
if ( is_page() || is_single() ) {
if ( have_posts() ) : while ( have_posts() ) : the_post();
echo '<style type="text/css">' . get_post_meta(get_the_ID(), '_custom_css', true) . '</style>';
endwhile; endif;
rewind_posts();
}
}
// END Custom CSS Widget
// Custom JS Widget
add_action( 'admin_menu', 'custom_js_hooks' );
add_action( 'save_post', 'save_custom_js' );
add_action( 'wp_head','insert_custom_js' );
function custom_js_hooks() {
add_meta_box( 'custom_js', 'Custom JS', 'custom_js_input', 'post', 'normal', 'high' );
add_meta_box( 'custom_js', 'Custom JS', 'custom_js_input', 'page', 'normal', 'high' );
}
function custom_js_input() {
global $post;
echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';
echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';
}
function save_custom_js($post_id) {
if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$custom_js = $_POST['custom_js'];
update_post_meta($post_id, '_custom_js', $custom_js);
}
function insert_custom_js() {
if ( is_page() || is_single() ) {
if ( have_posts() ) : while ( have_posts() ) : the_post();
echo '<script type="text/javascript">' . get_post_meta(get_the_ID(), '_custom_js', true) . '</script>';
endwhile; endif;
rewind_posts();
}
}
// END Custom JS Widget
これまで Simple CSS を使っていたけど、運用テストして切り替えます。
プラグインで管理画面に2件ほどエラーが出ます。動作は良いので気にせず使えますが、案件には使わない方が良さそうです。
参考サイト
【WordPress】投稿ページや固定ページの各記事ごとに個別のCSSやJavaScriptの入力エリアを設ける方法「備忘録」|n.tsukuda/福岡を拠点に活動するWEBデザイナー兼コーダー
]]>今回はクラス名を「scroll-effect」に設定しました。
ブロックエディターを使った場合は、各ブロック単位にそれぞれクラス名をつける必要があってめんどくさい感じです。
ブロックをグループ化してクラス名をつけると少し楽になります。
テンプレートや固定ページで使うと良い結果になります。
CSSとjsのファイル名
| css | style.css |
| js | theme.js |
※ファイル名が変わる場合は、ソースも合わせて変更してください。
/* スクロールすると表示する scroll-effect */
@media(min-width:751px) {
.scroll-effect {
opacity: 0;
transform: translateY(50px);
transition: opacity 1s, transform 1s;
}
.scroll-effect.visible {
opacity: 1;
transform: translateY(0);
}
}
// スクロールすると指定した要素を表示する
document.addEventListener("DOMContentLoaded", function () {
const targets = document.querySelectorAll(".scroll-effect");
const observerOptions = {
root: null,
rootMargin: "0px",
threshold: 0.1
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
observer.unobserve(entry.target);
}
});
}, observerOptions);
targets.forEach((target) => {
observer.observe(target);
});
});上記ファイルを function.php で読み込む様にする。
//----------------------------------------------------------------------------
// 独自ファイルの読み込み
//----------------------------------------------------------------------------
function theme_scripts(){
// theme custom css
wp_enqueue_style( 'theme_style', get_stylesheet_directory_uri().'/style.css');
// theme custom js
wp_enqueue_script( 'theme_scripts', get_template_directory_uri() . '/theme.js', array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'theme_scripts');

パララックスなイメージを持ったサイトを構築する場合に全体の統一感がまとまります。
]]>合格点の出たプラグインを紹介します。
パララックスに対応した画像ブロックでエフェクトを指定できます。主に画像を動かしたい場合に良いです。
背景に画像を指定して、その上にコンテンツを作ってパララックスで動くエフェクトを作ります。
設定が少し分かりにくかったのと、英語なんで・・慣れるのが大変かもです。可能性は高いと思います。
]]>ブロックエディタって、どう使うの?
という方に向けたサイトを作成しました。
基礎的な部分が完成したので、公開中です。
]]>[booking_package id=1]
]]>