ゼロから始めるWordPress自作テーマ #4「投稿一覧をGrid表示しよう」
WordPress
「ゼロから始めるWordPress自作テーマ」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。
WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。
第４回は「投稿一覧をGrid表示しよう」です。
以下のように、トップページの投稿一覧をGrid表示できるようになります。
今回作成したWordPressテーマのソースコードは以下から取得できます。
CSSを適用させよう
Grid表示には、cssを使います。そのために、まずWordPressサイトにcssを適用させます。
まず最初に index.php と同じフォルダ内に style.css というファイルを作成します。
次に、functions.php に以下を追加します。
// スタイルシートの適用
function custom_theme_assets() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );最後に、index.php に 8行目の「wp_head」を追加します。これで style.css を適用する準備が整いました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My WordPress Theme</title>
<?php wp_head(); ?>
</head>
<body>Grid表示させよう
それでは、cssで投稿をGrid表示させます。
CSSで簡単にGrid表示する方法が、Twitterで紹介されていました。たった３行で実装できるので、こちらの情報を参考にさせていただきます。
まずは、index.php に以下のように指定します。投稿一覧の div に対して、container という名前の id を指定します。
<body>
<h1>記事の一覧</h1>
<div id="container">
<!-- 投稿の数だけ繰り返して処理する -->
<?php while (have_posts()) : ?>
<!-- 投稿を取得 -->
<?php the_post(); ?>
<div>次に、style.cssで container に対して、Gridを指定します。
#container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 30px;
}これでGrid表示できました。
まとめ
今回は、cssをWordPressサイトに適用させて、投稿一覧をGrid表示させました。今後、見た目の調整は style.css ファイルに記述していきます。
次回は、css でサイトの見た目を整えていきます。