GeneratePressをカスタマイズする際に知っておくと便利な構造やCSS要素、フックポイントを整理しました。これらを理解すれば、「どこを変更すると何が変わるのか」が明確になり、効率的なカスタマイズが可能になります。
サイト全体の構造とCSS階層
GeneratePressのHTMLは論理的に構成されており、主要な要素には一貫したクラス名が付けられています。
基本構造
body
└── .site-container
├── .site-header
│ ├── .inside-header
│ │ ├── .site-logo
│ │ └── .main-navigation
│ └── .main-navigation
├── .site-content
│ ├── .content-area
│ │ └── .inside-article
│ └── .widget-area (.sidebar)
└── .site-footer
└── .inside-footerCode language: CSS (css)主要CSS要素一覧
1. ヘッダー関連
| 要素 | CSSセレクタ | 説明 |
|---|---|---|
| ヘッダーコンテナ | .site-header | サイトのヘッダー全体 |
| ヘッダー内部 | .inside-header | ヘッダーの内側コンテンツ領域 |
| サイトタイトル | .site-title | サイトのタイトルテキスト |
| サイトロゴ | .site-logo | ロゴ画像用コンテナ |
| メインメニュー | .main-navigation | トップナビゲーションメニュー |
| メニュー項目 | .menu-item, .menu-item-has-children | メニュー内の各リンク項目 |
/* ヘッダーの背景色と文字色を変更 */
.site-header {
background-color: #333;
color: #fff;
}
/* メニュー項目のホバー効果 */
.main-navigation .menu-item a:hover {
background-color: #555;
color: #fff;
}Code language: CSS (css)2. コンテンツエリア関連
| 要素 | CSSセレクタ | 説明 |
|---|---|---|
| コンテンツエリア | .content-area | メインコンテンツのエリア |
| 記事コンテナ | .inside-article | 記事内容を囲むコンテナ |
| 記事タイトル | .entry-title | 記事タイトル |
| 記事メタ情報 | .entry-meta | 投稿日時や著者情報 |
| 記事本文 | .entry-content | 記事の本文部分 |
| フィーチャー画像 | .featured-image | アイキャッチ画像 |
/* 記事タイトルのスタイル変更 */
.entry-title {
font-size: 28px;
color: #333;
border-bottom: 2px solid #ddd;
padding-bottom: 10px;
}
/* 記事コンテナに影をつける */
.inside-article {
box-shadow: 0 0 10px rgba(0,0,0,0.1);
padding: 25px;
border-radius: 5px;
}Code language: CSS (css)3. サイドバー関連
| 要素 | CSSセレクタ | 説明 |
|---|---|---|
| サイドバーエリア | .widget-area, .sidebar | サイドバー全体 |
| ウィジェットコンテナ | .widget | 個々のウィジェット |
| ウィジェットタイトル | .widget-title | ウィジェットのタイトル |
/* サイドバーウィジェットの装飾 */
.sidebar .widget {
background: #f9f9f9;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
}
/* ウィジェットタイトルの装飾 */
.widget-title {
border-bottom: 2px solid #e0e0e0;
padding-bottom: 10px;
margin-bottom: 15px;
font-size: 18px;
}Code language: CSS (css)4. フッター関連
| 要素 | CSSセレクタ | 説明 |
|---|---|---|
| フッターコンテナ | .site-footer | サイトのフッター全体 |
| フッター内部 | .inside-footer | フッターの内側コンテンツ領域 |
| フッターウィジェット | .footer-widgets-container | フッターウィジェットエリア |
| コピーライト | .copyright-bar | 著作権表示エリア |
/* フッターの背景色と文字色を変更 */
.site-footer {
background-color: #333;
color: #fff;
}
/* コピーライトのスタイル */
.copyright-bar {
text-align: center;
padding: 15px 0;
font-size: 14px;
}Code language: CSS (css)5. 投稿リスト関連
| 要素 | CSSセレクタ | 説明 |
|---|---|---|
| アーカイブタイトル | .archive-title | カテゴリページなどのタイトル |
| 投稿リスト | .post-list | 投稿一覧ページ |
| ページナビゲーション | .paging-navigation | ページ送りナビゲーション |
/* 投稿一覧をグリッドレイアウトに */
.post-list .site-main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
/* ページナビゲーションを中央揃え */
.paging-navigation {
text-align: center;
margin: 30px 0;
}Code language: CSS (css)重要なフックポイント
GeneratePressでは、フックを使ってテーマの様々な部分に独自のコードやコンテンツを挿入できます。以下は特に有用なフックポイントです。
アクションフック
| フック名 | 説明 | 使用例 |
|---|---|---|
generate_before_header | ヘッダーの前に実行 | 通知バーの追加 |
generate_after_header | ヘッダーの後に実行 | ヒーローセクションの追加 |
generate_before_content | コンテンツの前に実行 | パンくずリストの追加 |
generate_after_content | コンテンツの後に実行 | 関連記事の表示 |
generate_before_footer | フッターの前に実行 | CTAセクションの追加 |
generate_after_footer | フッターの後に実行 | 追跡コードの挿入 |
generate_after_entry_header | 記事タイトルの後に実行 | 目次の追加 |
generate_before_entry_content | 記事本文の前に実行 | 広告の挿入 |
generate_after_entry_content | 記事本文の後に実行 | シェアボタンの追加 |
// ヘッダー下にお知らせバーを追加する例
function add_notification_bar() {
echo '<div class="notification-bar">期間限定セール実施中！詳細はこちら</div>';
}
add_action('generate_after_header', 'add_notification_bar');
// 記事の下に関連記事を表示する例
function add_related_posts() {
if (is_single()) {
// 関連記事を取得するロジック
echo '<div class="related-posts">関連記事があります</div>';
}
}
add_action('generate_after_entry_content', 'add_related_posts');Code language: PHP (php)フィルターフック
| フック名 | 説明 | 使用例 |
|---|---|---|
generate_copyright | コピーライトテキストを変更 | 著作権表示のカスタマイズ |
generate_nav_search | ナビゲーション検索を変更 | 検索アイコンのカスタマイズ |
generate_sidebar_layout | サイドバーレイアウトを変更 | 特定ページでサイドバーを非表示 |
generate_blog_columns | ブログカラム数を変更 | グリッドレイアウトの列数変更 |
generate_post_author | 投稿著者表示を変更 | 著者情報のカスタマイズ |
generate_entry_meta_post_date | 投稿日時表示を変更 | 日付表示のフォーマット変更 |
// コピーライト表示を変更する例
function custom_copyright($copyright) {
return 'Copyright © ' . date('Y') . ' <a href="' . home_url() . '">' . get_bloginfo('name') . '</a>. All rights reserved.';
}
add_filter('generate_copyright', 'custom_copyright');
// 特定の投稿でサイドバーを非表示にする例
function remove_sidebar_on_specific_posts($layout) {
if (is_single(array(123, 456, 789))) { // 特定の投稿ID
return 'no-sidebar';
}
return $layout;
}
add_filter('generate_sidebar_layout', 'remove_sidebar_on_specific_posts');Code language: PHP (php)ページごとの状態を判別するクラス・関数
GeneratePressは、現在表示しているページの種類に応じてbodyタグに特定のクラスを追加します。これらを利用してページタイプ別のスタイル設定が可能です。
主な判別クラス
| 状態 | bodyクラス | PHP条件関数 |
|---|---|---|
| トップページ | .home | is_home() |
| 個別投稿ページ | .single | is_single() |
| 固定ページ | .page | is_page() |
| アーカイブページ | .archive | is_archive() |
| カテゴリーページ | .category | is_category() |
| 検索結果ページ | .search | is_search() |
| 404エラーページ | .error404 | is_404() |
これらを利用したCSSの例:
/* トップページのみヘッダーを大きく表示 */
.home .site-header {
padding: 30px 0;
}
/* 投稿ページのみサイドバーの幅を広く */
.single .widget-area {
width: 30%;
}
/* 404エラーページのスタイル */
.error404 .inside-article {
text-align: center;
padding: 50px 20px;
}Code language: CSS (css)主要テンプレートファイルとそのカスタマイズ
子テーマで独自テンプレートを作成することで、特定のページタイプのデザインをカスタマイズできます。
| テンプレートファイル | 説明 | カスタマイズポイント |
|---|---|---|
header.php | サイトヘッダー | ナビゲーション、ロゴ配置 |
footer.php | サイトフッター | コピーライト、フッターウィジェット |
index.php | メインテンプレート | 全体的なサイト構造 |
single.php | 個別投稿ページ | 記事レイアウト、投稿メタ情報 |
page.php | 固定ページ | ページのレイアウト |
archive.php | アーカイブページ | カテゴリー/タグページのレイアウト |
search.php | 検索結果ページ | 検索結果の表示形式 |
404.php | 404エラーページ | カスタム404メッセージ |
カスタムテンプレート作成例:
<?php
/**
* Template Name: 全幅テンプレート
*/
get_header();
?>
<div id="primary" class="content-area full-width">
<main id="main" class="site-main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'content', 'page' );
// コメントが有効なら表示
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
</div>
<?php
get_footer();Code language: HTML, XML (xml)GenerateBlocksのCSS構造
GenerateBlocksを使う場合の主要クラス:
| ブロック | 主要クラス | カスタマイズポイント |
|---|---|---|
| コンテナ | .gb-container | 背景、パディング、マージン |
| グリッド | .gb-grid-wrapper, .gb-grid-column | カラム幅、ギャップ |
| 見出し | .gb-headline | フォント、色、サイズ |
| ボタン | .gb-button | 色、サイズ、ホバー効果 |
/* ボタンホバー時のアニメーション */
.gb-button {
transition: all 0.3s ease;
}
.gb-button:hover {
transform: translateY(-3px);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
/* グリッド列のレスポンシブ調整 */
@media (max-width: 768px) {
.gb-grid-column {
flex-basis: 100% !important;
}
}Code language: CSS (css)レスポンシブデザインのブレイクポイント
GeneratePressが使用する主要なメディアクエリのブレイクポイント:
| デバイスサイズ | ブレイクポイント | 説明 |
|---|---|---|
| モバイル | 768px以下 | スマートフォン向け |
| タブレット | 769px〜1024px | タブレット向け |
| デスクトップ | 1025px以上 | PC向け |
/* デフォルトスタイル（モバイルファースト） */
.my-element {
font-size: 16px;
padding: 10px;
}
/* タブレット向け */
@media (min-width: 769px) {
.my-element {
font-size: 18px;
padding: 15px;
}
}
/* デスクトップ向け */
@media (min-width: 1025px) {
.my-element {
font-size: 20px;
padding: 20px;
}
}Code language: CSS (css)実用的なカスタマイズ例
以下に、上記の要素を組み合わせた実用的なカスタマイズ例をいくつか紹介します。
1. スティッキーヘッダーを半透明化してスクロール時に縮小
.site-header {
position: sticky;
top: 0;
transition: all 0.3s ease;
z-index: 999;
}
/* スクロール時のクラスをJSで追加 */
.site-header.scrolled {
background-color: rgba(255, 255, 255, 0.95);
padding: 5px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}Code language: CSS (css)JavaScript部分:
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('.site-header');
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
});Code language: JavaScript (javascript)2. 記事内の見出しに自動的にアンカーリンクを追加
function add_anchor_links_to_headings($content) {
if (!is_singular('post')) return $content;
$pattern = '/<h([2-3])(.*)>(.*)<\/h[2-3]>/i';
$replacement = function($matches) {
$level = $matches[1];
$attrs = $matches[2];
$title = $matches[3];
$id = sanitize_title($title);
return sprintf(
'<h%s%s id="%s">%s <a href="#%s" class="heading-anchor">#</a></h%s>',
$level, $attrs, $id, $title, $id, $level
);
};
return preg_replace_callback($pattern, $replacement, $content);
}
add_filter('the_content', 'add_anchor_links_to_headings');Code language: PHP (php)CSS部分:
.heading-anchor {
opacity: 0;
font-size: 0.8em;
transition: opacity 0.2s;
text-decoration: none;
color: #aaa;
}
h2:hover .heading-anchor,
h3:hover .heading-anchor {
opacity: 1;
}Code language: CSS (css)3. カード型のブログ記事リストをカスタムCSS化
function add_card_layout_class($classes) {
if (is_home() || is_archive()) {
$classes[] = 'card-layout';
}
return $classes;
}
add_filter('body_class', 'add_card_layout_class');Code language: PHP (php)CSS部分:
.card-layout .site-main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.card-layout .inside-article {
display: flex;
flex-direction: column;
height: 100%;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.card-layout .inside-article:hover {
transform: translateY(-5px);
}
.card-layout .post-image {
margin: 0;
}
.card-layout .post-image img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-layout .entry-summary {
padding: 0 20px 20px;
flex-grow: 1;
}
.card-layout .entry-header {
padding: 20px 20px 0;
}
.card-layout .entry-title {
font-size: 20px;
margin-bottom: 10px;
}
.card-layout .entry-meta {
font-size: 14px;
margin-bottom: 15px;
}
.card-layout .read-more-container {
padding: 0 20px 20px;
margin-top: auto;
}Code language: CSS (css)まとめ
GeneratePressのサイト構造を理解し、適切なCSS要素とフックポイントを把握することで、より効率的で高度なカスタマイズが可能になります。重要なポイントは：
- サイト全体の構造（ヘッダー、コンテンツ、サイドバー、フッター）を理解する
- 各要素のCSS階層と命名規則を把握する
- アクションフックとフィルターフックを活用して適切な位置にコードを挿入する
- レスポンシブデザインのブレイクポイントを適切に使い分ける
- 子テーマを使って安全にカスタマイズを行う
これらの知識を活用することで、GeneratePressの軽量性と高速性を維持しながら、オリジナリティ溢れるサイトを構築できます。