WordPress新テーマ「Ipsum」の特徴とカスタマイズ方法を解説

12月にリリース予定のWordPress 7.2では、デフォルトテーマが新しくなります。今回のテーマは、従来のように西暦を使った名前ではなく、テーマの特徴を表す「Ipsum」という名前が付けられています。

Ipsumはミニマルなデザインと軽量さが特徴のブロックテーマで、フルサイト編集に対応し、最新のブロックエディターの標準仕様に準拠しています。必要な機能を組み合わせて柔軟にカスタマイズできる設計も特徴です。

このテーマは、文章を書くことに集中できる、シンプルで使いやすいブログ環境を目指して開発されました。細かな点線の下線から、標準搭載のフォント、厳選されたスタイルバリエーションまで、細部にわたって控えめなデザインが採用され、アクセシビリティと読みやすさが重視されています。

また、かといって表現の幅が限られるわけではなく、ブログのデザインを自由に形にできる、いわば真っ白なキャンバスのようなテーマです。

今回は、新デフォルトテーマ「Ipsum」の特徴を掘り下げながら、WordPressの標準機能を使って活用する方法をご紹介します。

アクセシビリティに配慮したミニマルなテーマ「Ipsum」

Ipsumは、読みやすさを重視したミニマルなデザインが特徴です。

Ipsumでは、6段階のグレーと1色のアクセントカラーが用意されており、文字と背景のコントラストが十分に確保されています。標準の背景色（#fcfcfc）と本文の文字色（#000000bf）のコントラスト比は10.26:1で、WCAGの最高適合レベルであるAAAの基準を満たしています。

また、WordPress標準のキーボード操作にも対応しており、すべてのページに「コンテンツへスキップ」リンクが表示されます。これにより、Tabキーでページを操作するユーザーは、ヘッダーのナビゲーションリンクを一つずつたどることなく、メインコンテンツに直接移動できます。

キーボード操作でリンクを選択すると、アクセントカラーで強調表示されるため、現在どの要素を選択しているのかも一目でわかります。

Ipsumの読みやすさを支えるもう一つの要素が、タイポグラフィです。5種類のフォントサイズがあらかじめ用意されているほか、画面サイズに応じて文字の大きさを調整するFluid Typographyにも対応しています。

本文中のリンクには、控えめな点線の下線が使われています。ミニマルなデザインにはよく馴染んでいますが、ページの配色によってはリンクが目立ちにくくなる可能性があります。一方、キーボード操作時には、選択中のリンクがアクセントカラーの枠線で強調されるため、リンクの位置を簡単に確認できます。

続いて、Ipsumに搭載されている機能を詳しく見ていきましょう。

テンプレートとパターン

Ipsumには、ページのレイアウトを内部のパターンで管理するテンプレートが標準搭載されています。例えば、page.htmlテンプレートのコードは以下のようになっています。

この1行のコードで、非表示のパターンであるhidden-page.phpを呼び出しています。このパターンがページのレイアウトを制御し、必要なメタデータを定義します。

/**
 * Title: Pages
 * Slug: ipsum/hidden-page
 * Template Types: page
 * Inserter: no
 *
 * @package Ipsum
 * @since Ipsum 1.0
 */

また、index-sidebarやarchive-sidebarなどのカスタムテンプレートもPHPで直接登録されており、サイトエディターから選択できます。

A page using the Pages template in the Ipsum theme. — 投稿エディタでページテンプレートを設定できます。

現在、コンテンツの作成やレイアウトの調整に利用できるパターンは約60種類用意されています。

Browsing patterns in the Site Editor. — サイトエディタでパターンを閲覧しています。

一部のパターンはテーマの基本テンプレート専用として非表示になっていますが、大半は通常のページ作成にも自由に利用できます。

Block Bindings APIによる動的コンテンツ

開発者にとって興味深いのが、パターン内でのBlock Bindings APIの活用です。

例えば、archive-full.phpパターンでは、以下のようにブロックの属性とデータを紐付けています。



<p class="has-manrope-font-family has-small-font-size" style="font-style:normal;font-weight:600"><?php esc_html_e( 'Join the conversation', 'ipsum' ); ?></p>

このデータソースは、テーマのfunctions.phpファイルで以下のように登録されています。

if ( ! function_exists( 'ipsum_comments_cta_binding' ) ) :
	/**
	 * Returns the comments call to action for the current post.
	 *
	 * @since Ipsum 1.0
	 * @param array    $source_args    Block binding source arguments.
	 * @param WP_Block $block_instance The block instance.
	 * @return string The call to action text.
	 */
	function ipsum_comments_cta_binding( $source_args, $block_instance ) {
		$post_id = $block_instance->context['postId'] ?? get_the_ID();

		if ( get_comments_number( $post_id ) > 0 ) {
			$text = __( 'Join the conversation', 'ipsum' );
		} else {
			$text = __( 'Be the first to comment', 'ipsum' );
		}

		return '<a href="' . esc_url( get_comments_link( $post_id ) ) . '">' . esc_html( $text ) . '</a>';
	}
endif;

if ( ! function_exists( 'ipsum_register_block_bindings' ) ) :
	/**
	 * Registers the comments call-to-action block binding source.
	 *
	 * @since Ipsum 1.0
	 * @return void
	 */
	function ipsum_register_block_bindings() {
		register_block_bindings_source(
			'ipsum/comments-cta',
			array(
				'label'              => __( 'Comments call to action', 'ipsum' ),
				'get_value_callback' => 'ipsum_comments_cta_binding',
				'uses_context'       => array( 'postId' ),
			)
		);
	}
endif;
add_action( 'init', 'ipsum_register_block_bindings' );

つまり、ipsum/comments-ctaというバインディングソースを通じて、投稿にコメントがある場合は「会話に参加する（Join the conversation）」、まだコメントがない場合は「最初のコメントを投稿する（Be the first to comment）」というリンクテキストが動的に返されます。

この仕組みにより、投稿のコメント状況に応じた案内を、ブロックの内容を手動で変更することなく表示できます。

フレキシブルなタイポグラフィとタイポグラフィプリセット

Ipsumのtheme.jsonには、複数のフォントファミリーが登録されています。いずれも.woff2形式の可変フォントで、サンセリフ体（Manrope、Inter、Archivo、Archivo Condensed）、セリフ体（Besley、STIX Two Text）、等幅フォント（JetBrains Mono）が用意されています。本文には標準でInterが使用されます。

これらのフォントはすべてサーバー内に保存されるため、Google Fontsなどの外部サービスに依存せず、フォントの読み込みをより柔軟に管理できます。

また、theme.jsonでは固定サイズと可変サイズの両方が定義されており、可変サイズはCSSのclamp()関数を使ったスタイルに自動変換されます。

"fontSizes": [
	...
	{
		"fluid": {
			"max": "1.75rem",
			"min": "1.5rem"
		},
		"name": "X-Large",
		"size": "1.75rem",
		"slug": "x-large"
	},
	{
		"fluid": {
			"max": "2.1875rem",
			"min": "1.625rem"
		},
		"name": "2X-Large",
		"size": "2.1875rem",
		"slug": "2-x-large"
	}
],

さらに、Ipsumには5種類のタイポグラフィプリセットが用意されており、サイトエディターの「スタイル」パネルから選択できます。

各プリセットではfontFamilies配列が上書きされ、サイトの配色を変えることなく、フォントの組み合わせだけを切り替えられます。

スタイルのバリエーション

Ipsumには、カラーパレット、デュオトーンフィルター、フォントの組み合わせが異なる7種類のスタイルバリエーションが用意されています。

A screenshot of Ipsum theme's Global Styles panel. — WordPressサイトエディタ内のIpsumグローバルスタイルパネル。

スタイルバリエーションの仕組みを見てみましょう。以下は「Golden Hour」というバリエーションの設定コードです。「Peach on maroon」というデュオトーンフィルターと独自のカラーパレットを定義し、サイト全体のフォントにManropeを指定しています。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Golden Hour",
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [
						"#7a1000",
						"#ffd9bd"
					],
					"name": "Peach on maroon",
					"slug": "duotone-1"
				}
			],
			"palette": [
				{
					"color": "#7a1000",
					"name": "Color 1",
					"slug": "theme-1"
				},
				{
					"color": "#ffd9bd",
					"name": "Color 2",
					"slug": "theme-2"
				},
				{
					"color": "#ff8c52",
					"name": "Color 3",
					"slug": "theme-3"
				},
				{
					"color": "#ffd9bd40",
					"name": "Color 4",
					"slug": "theme-4"
				},
				{
					"color": "#ffd9bd1a",
					"name": "Color 5",
					"slug": "theme-5"
				},
				{
					"color": "#fff1e8",
					"name": "Color 6",
					"slug": "theme-6"
				}
			]
		},
		"custom": {
			"controlScheme": "dark"
		}
	},
	"styles": {
		"blocks": {
			"core/post-featured-image": {
				"filter": {
					"duotone": "var:preset|duotone|duotone-1"
				}
			}
		},
		"elements": {
			"heading": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--manrope)",
					"fontStyle": "normal",
					"fontWeight": "500"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--manrope)",
			"fontStyle": "normal",
			"fontWeight": "400"
		}
	}
}

ほかのスタイルバリエーションも基本的な構造は同じで、それぞれ異なる配色やフォントの組み合わせが設定されています。

ブロックのスタイルバリエーション

Ipsumでは、一部のブロックにも複数のスタイルバリエーションが用意されています。これらのスタイルは、テーマのstyles/blocks/ディレクトリに保存されたJSONファイル、またはfunctions.phpファイルで登録されています。

ブロックのスタイルバリエーションは、サイトエディターの「スタイル」パネルにある「ブロック」と「要素」から確認・カスタマイズできます。

サイトエディターの「スタイル」パネルにある「段落」ブロックのスタイルバリエーション

また、投稿エディターでは、ブロック設定のサイドバーからスタイルバリエーションを選択でき、個々のブロックにワンクリックで適用できます。

子テーマを使ったIpsumのカスタマイズ

WordPressテーマの機能を拡張するには、子テーマを作成するのがおすすめです。ここでは、Ipsumの子テーマを作成し、左右非対称のBentoグリッドを使ったアーカイブページを実装する方法をご紹介します。

作業は以下の5ステップで進めます。

ステップ1：子テーマを設定する
ステップ2：Bentoアーカイブパターンを作成する
ステップ3：Bentoグリッドパターンを作成する
ステップ4：Bentoグリッド用のスタイルシートを作成する
ステップ5：カスタムテンプレートを登録する

ステップ 1. 子テーマを設定する

まず、wp-content/themes/ディレクトリ内に、ipsum-childなどの名前で子テーマ用のフォルダを作成します。このフォルダ内に、style.cssとfunctions.phpの2つのファイルを追加してください。

style.cssには、WordPressがテーマを識別・管理するためのメタデータを記述します。まずは以下のコードを追加します。

/*
Theme Name: Ipsum Child
Theme URI: https://example.com/
Description: A custom child theme for the Ipsum default theme 
Author: Your Name
Author URI: https://example.com
Template: ipsum
Version: 1.0.0
Text Domain: ipsum-child
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Ipsumでは、functions.php内でget_stylesheet_directory_uri()を使用してテーマのスタイルシートを登録しています。しかし、子テーマを有効にすると、この関数は子テーマのディレクトリを参照するため、親テーマのスタイルシートが読み込まれなくなります。

そのため、Ipsumの子テーマでは、親テーマのスタイルを引き継ぐために、親テーマのスタイルシートを明示的に読み込む必要があります。

子テーマのfunctions.phpに、以下のコードを追加してください。

<?php
/**
 * Ipsum Child functions and definitions.
 *
 * @package Ipsum_Child
 * @since Ipsum Child 1.0.0
 */

if ( ! function_exists( 'ipsum_child_styles' ) ) :

	function ipsum_child_styles() {
		wp_deregister_style( 'ipsum-style' );
		wp_register_style(
			'ipsum-style',
			get_template_directory_uri() . '/style.css',
			array(),
			wp_get_theme( get_template() )->get( 'Version' )
		);

		wp_enqueue_style(
			'ipsum-child-style',
			get_stylesheet_uri(),
			array( 'ipsum-style' ),
			wp_get_theme()->get( 'Version' )
		);
	}
endif;
add_action( 'wp_enqueue_scripts', 'ipsum_child_styles', 20 );

このコードでは、まずget_template_directory_uri()を使用して、ipsum-styleというハンドルに親テーマのスタイルシートを再登録しています。その後、親テーマのスタイルシートに続いて、子テーマのスタイルシートを読み込みます。

これで子テーマの基本設定は完了です。続いて、Bentoグリッドを使ったアーカイブパターンを作成していきます。

ステップ 2. Bentoアーカイブパターンを作成する

アーカイブページをBentoグリッド形式で表示するために、親テーマに用意されているコードを再利用します。

パターンの構成には、Ipsumに標準搭載されている以下のパターンを使用します。

archive-photographic.php：グリッド形式で投稿を取得・表示するクエリ
archive-columns.php：タイトル、日付、検索結果がない場合のメッセージ、ページネーション
hidden-archive.php：テンプレート全体のレイアウト

まず、子テーマのディレクトリ内にpatterns/とtemplates/フォルダを作成し、以下のファイルを追加します。

patterns/archive-bento.php
patterns/hidden-archive-bento.php
templates/archive.html

この時点で、子テーマのディレクトリ構造は以下のようになります。

ipsum-child/
├── style.css
├── functions.php
├── patterns/
│   ├── archive-bento.php
│   └── hidden-archive-bento.php
└── templates/
    └── archive.html

次に、親テーマのhidden-archive.phpパターンのコードをコピーし、子テーマのhidden-archive-bento.phpに貼り付けます。そのうえで、ヘッダーのメタデータ、テキストドメイン、呼び出すパターンのスラッグを以下のように変更します。

Step 3. Bentoグリッドパターンを作成する

続いて、patterns/archive-bento.phpにBentoグリッドのパターンを実装します。ここでも、Ipsumに標準搭載されているコードを活用します。

以下は、archive-bento.phpのコード全体です。各コードのコメントには、元となるコードの参照元や変更点を記載しています。

<?php
/**
 * Title: Archive Bento Grid
 * Slug: ipsum-child/archive-bento
 * Categories: posts
 * Block Types: core/query
 * Viewport width: 1280
 * Description: A bento grid of posts: one large card, wide and tall cards, and small cards, repeating every ten posts.
 *
 * @package Ipsum_Child
 * @since Ipsum Child 1.0.0
 */

?>

<?php 
/**
 * Query Loop
 * Origin: archive-columns.php. 
 * Changed: perPage, name, text domain. 
 */ 
?>
<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"excludeCurrent":null},"metadata":{"categories":["posts"],"name":"<?php echo esc_html_x( 'Archive Bento Grid', 'Name of the Archive Bento Grid query', 'ipsum-child' ); ?>"},"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"className":"bento-grid","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"grid","columnCount":4}} -->

<?php 
/**
 * Post Template
 * Origin: archive-photographic.php. 
 * Changed: gap, columns. 
 * New: class bento-grid. 
 */ 

/** Card 
 * Origin: hero-colophon.php, cta-membership.php. 
 * New: name, justifyContent stretch. 
 */
?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Bento Card', 'Name of the group holding a bento card', 'ipsum-child' ); ?>"},"className":"is-style-crop-contents","style":{"border":{"radius":{"topLeft":"10px","topRight":"10px","bottomLeft":"10px","bottomRight":"10px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|30"}},"backgroundColor":"theme-5","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group is-style-crop-contents has-theme-5-background-color has-background" style="border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:post-featured-image {"isLink":true,"sizeSlug":"large"} /-->

<?php
/** Featured image
 * Origin: archive-standard.php
 * Changed: removed padding. 
 */ 
?>
<?php 
/** Title and Meta
 * Origin: archive-columns.php.
 * Changed: removed selfStretch, gap. 
 */ ?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Title and Meta', 'Name of the group holding the post title and meta', 'ipsum-child' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:post-title {"isLink":true,"fontSize":"large"} /-->

<?php 
/** 
 * Post Title and Post Date
 * Origin: archive-columns.php. 
 */ ?>
<!-- wp:post-date {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<?php 
/** No results
 * Origin: archive-columns.php. 
 * Changed: text domain only. 
 */ ?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'No Results Wrapper', 'Name of the group shown when a query has no results', 'ipsum-child' ); ?>"},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:query-no-results -->
<!-- wp:paragraph -->
<p><?php esc_html_e( 'No posts have been published in this section yet.', 'ipsum-child' ); ?></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:group -->

<?php 
/** 
 * Pagination
 * Origin: archive-columns.php. 
 * Changed: text domain only. 
 */ ?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Pagination Wrapper', 'Name of the group wrapping the pagination', 'ipsum-child' ); ?>"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:group --></div>
<!-- /wp:query -->

このコードでは、Ipsumに標準搭載されているブロックを組み合わせ、Bentoグリッド用のパターンを作成しています。

主な変更点は以下のとおりです。

クエリブロック：クエリループのperPageを10に変更しました。これはBentoグリッドのレイアウトを実現するうえで重要な設定です。次のステップで定義するCSSでは、10件を1セット（10n）として、大きなカード、横長のカード、縦長のカード、小さなカードを組み合わせたレイアウトを繰り返し表示します。
投稿テンプレートブロック： カスタムCSSクラスbento-gridを追加しました。これにより、CSSでグリッドを指定し、左右非対称のレイアウトを適用できるようになります。
グループブロック：縦方向のFlexboxレイアウトを採用しています。CSSによって各カードをグリッドの領域いっぱいに広げ、アイキャッチ画像も利用可能なスペースに合わせて拡大できるようにします。
テキストドメイン：すべての文字列のテキストドメインをipsum-childに変更しました。

これで、Bentoグリッドパターンのブロック構造が完成しました。次のステップでは、CSSを使って実際のレイアウトを整えていきます。

ステップ4. Bentoグリッド用のスタイルシートを作成する

子テーマのstyle.cssファイルを開き、以下のコードを貼り付けます。

.bento-grid {
	grid-auto-flow: dense;
	grid-auto-rows: minmax(18rem, auto);
}

.bento-grid > li:nth-child(10n + 1) {
	grid-column: span 2;
	grid-row: span 2;
}

.bento-grid > li:nth-child(10n + 6) {
	grid-column: span 2;
}

.bento-grid > li:nth-child(10n + 7),
.bento-grid > li:nth-child(10n + 8) {
	grid-row: span 2;
}

.bento-grid > li > .wp-block-group {
	height: 100%;
}

.bento-grid .wp-block-post-featured-image {
	position: relative;
	flex: 1 1 0;
	min-height: 8rem;
	margin: 0;
}

.bento-grid .wp-block-post-featured-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 781px) {
	.bento-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bento-grid > li:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}

	.bento-grid > li:nth-child(10n + 1),
	.bento-grid > li:nth-child(10n + 6) {
		grid-column: span 2;
	}
}

@media (max-width: 480px) {
	.bento-grid.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bento-grid > li:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}
}

このスタイルシートでは、以下のようにBentoグリッドのレイアウトを指定しています。

grid-auto-flow: dense： CSS Gridの空きスペースを後続の要素で埋め、カードを隙間なく配置します。また、grid-auto-rowsで各行の高さを最小18remに設定しています。
.bento-grid > li:nth-child(10n + 1)： 10件の投稿を1セット（10n）としてレイアウトを繰り返します。各セットの最初の投稿（10n + 1）は、2列×2行を占める大きなカードとして表示されます。
li:nth-child(10n + 6)： 6番目の投稿を2列にまたがる横長のカードとして表示します。また、7番目と8番目の投稿は、それぞれ2行にまたがる縦長のカードになります。
.wp-block-post-featured-image img：アイキャッチ画像を、flex: 1 1 0を指定したFlexboxの子要素内に絶対配置し、object-fit: coverで表示領域に合わせて拡大・トリミングします。これにより、カードの大きさに応じて画像が自然に収まります。

最後に、メディアクエリを使って画面幅に応じた列数を指定しています。画面幅が781px以下の場合は2列、480px以下の場合は1列に切り替わり、小さな画面でも見やすいレイアウトになります。

ステップ5. カスタムテンプレートを登録する

続いて、templates/archive.htmlを開き、以下のコードを追加します。

<!-- wp:pattern {"slug":"ipsum-child/hidden-archive-bento"} /-->

templates/archive.htmlは、WordPressの標準的なテンプレート階層に従ったファイル名です。より優先度の高いテンプレートが存在しない場合、親テーマのデフォルトのアーカイブテンプレートに代わって使用されます。

インデックスページにも同じレイアウトを適用したい場合は、templates/index.htmlファイルを作成し、同じコードを追加するだけです。

このコードでは、作成したhidden-archive-bentoパターンを呼び出すだけなので、テンプレートの構造をシンプルに保ちながら、パーツごとに管理できます。

これで実装は完了です。子テーマをアップロードして有効化したら、次のセクションで動作を確認していきます。

完成したレイアウト

これで、サイトのアーカイブページにBentoグリッドレイアウトを適用できるようになりました。

必要に応じて、固定ページにもBentoグリッドパターンを追加できます。その場合は、クエリブロックのinheritをfalseに変更し、表示する投稿などのクエリパラメータを設定してください。

WordPress 7.2のサイトエディターで表示したBentoグリッドパターン

前述のとおり、サイトのインデックスページにも同じレイアウトを適用するには、同じパターンを参照するtemplates/index.htmlファイルを作成する必要があります。

最後の画像は、ステージングサイトのホームページにBentoグリッドレイアウトを適用した例です。

軽量でアクセシビリティに優れたWordPressテーマ

Ipsumは、WordPressの最新の編集機能、再利用可能なパターン、柔軟なスタイル設定を備えながら、シンプルで無駄のないデザインを追求したテーマです。

パターンとテンプレートの仕組みを理解すれば、標準のブログ向けレイアウトにとどまらず、さまざまなデザインを実現できます。今回ご紹介したBentoグリッドも、Ipsumの子テーマを使ったカスタマイズの一例にすぎません。

また、サイトの表示速度やパフォーマンスを重視するなら、コードの最適化だけでは不十分です。キャッシュの活用、各種設定の最適化、そしてサーバー環境も重要な役割を果たします。

Kinstaでは、WordPressサイトの高速化と安定稼働を支えるWordPress専用マネージドクラウドサーバーをご提供しています。サイトの要件に適したプランを見つけて、ぜひ一度その性能をお試しください。

Carlo Daniele Kinsta

ウェブデザインとフロントエンド開発をこよなく愛し、WordPress歴は10年以上。イタリアおよびヨーロッパの大学や教育機関とも共同研究を行う。WordPressに関する記事を何十件も執筆しており、イタリア国内外のウェブサイトや雑誌に掲載されている。詳しい仕事情報はXとLinkedInで公開中。

Kinsta APIでボット対策の管理とアクセス分析が可能に

Yoko Co、Kinstaへの移行で非営利団体のWordPressサイトを最大75%高速化

知識の充足に

ツールと洞察

最新の記事