Gutenbergを使ってみた

2019年7月15日2024年3月12日

1. グーテンベルグ&ルクセリタスだけの機能

グーテンベルグ&ルクセリタスだけの機能

WordPressのブロックエディター、グーテンベルグを始めて使ってみた。まだ慣れていないのと、機能を把握しきれていないので、時間は掛かるけれど、面白いですね。

プラグインで配布され始めた時にインストールしてみたけれども、めんどくさそうで放置ｗ。WordPress5.0以降もプラグインでクラシックエディターを使っていました。

しかし、使ってみると表現の幅が広がり、今まで出来なかった様々な事が出来るようになる。やってみると結構楽しい。

Gutenberg Luxeritas Blocks

ブログカード
区切り線
枠線ブロック
トピック
アコーディオン
定型文テキストエディタ
シンタックスハイライター

ブログカード

Luxeritas Theme | SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料

Luxeritas はSEO最適化済み、レスポンシブデザイン、高カスタマイズ性にも関わらず、Webページを高速に ...

https://thk.kanzae.net/wp/

アコーディオン

ブログカードの使い方

ルクセリタス3.6.4を使っている場合、
グーテンベルグ標準のブログカードは使えない模様。
ルクセリタス・ブロックからブログカードを選択すべし。

アコーディオンはこんなこともできる

タイトル文字色と背景色を変えられる。
左寄せ、中央揃え、右寄せも選択可。
アコーディオンブロックの幅もスライダーで簡単に調整可。

テキスト装飾系

蛍光ペン
蛍光ペンドット
黄、赤、青、緑、オレンジ、ピンクの6色から選択可
その他もろもろ多彩な機能がてんこ盛り

トピック

自己紹介

　　まったりできる時間が欲しいよ～

区切り線

シンタックスハイライター

<?php
/**
 * The template for displaying all single posts
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
get_header(); ?>
	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">
			<?php /* The loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', get_post_format() ); ?>
				<?php twentythirteen_post_nav(); ?>
				<?php comments_template(); ?>
			<?php endwhile; ?>
		</div><!-- #content -->
	</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Gutenberg標準のブロック

一般ブロック

段落
見出し
画像
ギャラリー
リスト
引用
音声
カバー
ファイル
動画

ここからYoutube動画を埋め込むと、何故か余計な空白スペースができてしまう。何でだろ？

今のところ、下のフォーマット→カスタムHTMLでYoutube動画を挿入してます。

フォーマット・ブロック

テーブル
クラシック
ソーズコード
カスタムhtml
整形済み
ブルクオート
詩

詩ブロック使ってみた。茨木のり子「倚りかからず」より引用

もはや
 できあいの思想には倚りかかりたくない
 もはや
 できあいの宗教には倚りかかりたくない
 もはや
 できあいの学問には倚りかかりたくない
 もはや
 いかなる権威にも倚りかかりたくはない
 ながく生きて
 心底学んだのはそれぐらい
 じぶんの耳目
 じぶんの二本足のみで立っていて
 なに不都合のことやある
 倚りかかるとすれば
 それは
 椅子の背もたれだけ

茨木のり子　倚りかからず　より引用

詩ブロックは、特別な余白形式を与えて、詩や歌詞を引用する際に使うそうです。しかし、特別感は何もないｗ。preタグを使った整形済みテキストになっているようだ。

中央揃えにして、文字サイズを1段階大きくしただけです。フォントの選択肢が少ないです。普通に段落から書いた方が良さそう。

WordPressのツボとコツがゼッタイにわかる本［第2版］

著者 : 中田亨

秀和システム

発売日 : 2023-03-18

ブクログでレビューを見る»

ギャラリー

クラシックエディタのギャラリーとは見栄え変わって面白いです。画像の拡大表示が無いのが残念賞。

文字数や構成の確認

をクリック(編集画面左上)

文字数の確認
見出し、段落、ブロック数の確認
見出しタグの使い方が適切かどうか。間違いがあれば指摘してくれる。

改行

ブロック要素によってはENTERキーで改行できないです。

SHIFT＋ENTERキーで改行する。

ブロック要素としてクラシックエディタがある

テーブル

クラシックエディタでは別途プラグインが必要だった表が作れる。

<!-- wp:table -->
<table class="wp-block-table"><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<!-- /wp:table -->

コードも綺麗でレスポンシブ対応です。しかし表はセル内の文字数や列数、PCかスマホか等によってとても見難くなってしまいます。表の扱い方は別記事に書いてみました。