• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Genesis WP Fan

Genesis Framework とWordPressカスタマイズの情報サイト

  • ホームHome
  • 日本人向けGenesis子テーマ「Muromachi」Genesis Child Theme “Muromachi”
  • Genesis とは
  • Genesis子テーマ一覧
  • Genesisの使い方
  • Genesisカスタマイズ
  • Genesisプラグイン
  • お問い合わせ
HomeGenesis Framework カスタマイズたった1行のコードでGenesisサイトのレイアウトを変更する方法
  • Genesis Framework カスタマイズ

たった1行のコードでGenesisサイトのレイアウトを変更する方法

site-layout-content-sidebar

今回は1行のPHPコードで Genesis サイトのレイアウトを変更する方法を紹介したいと思います。

Genesis本体に組み込まれている関数を使うので、自分でコードを書くより安全です。

目次

  • PHPファイルにコードを追加
    • 1 横幅100%にする場合
    • 2 サイドバー・コンテンツの順(左サイドバー1つ)にする場合
    • 3 コンテンツ・サイドバーの順(右サイドバー1つ)にする場合
    • 4 サイドバー・コンテンツ・サイドバーの順(サイドバー2つ)にする場合
    • 5 コンテンツ・サイドバー・サイドバーの順(サイドバー2つ)にする場合
    • 6 サイドバー・サイドバー・コンテンツの順(サイドバー2つ)にする場合

PHPファイルにコードを追加

レイアウトを変更するには、下で紹介しているコードを、対象のPHPファイルに追加するだけ。

この方法でレイアウトを変更すると、WordPressのカスタマイザーで別のレイアウトを指定されても無効に。PHPファイルで指定したレイアウトの状態を保ってくれます。

お客さんのサイトを制作する時のように、指定したレイアウト以外に変更してほしくない場合にとても便利です。

1 横幅100%にする場合

front-page.php や page.php など、横幅100%にしたいPHPファイルに、下のコードを追加します。

add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

これでサイドバーがなくなり、メインカラムの横幅が100%に広がります。

full-width-after
PHPファイルから横幅100%のレイアウトに指定

2 サイドバー・コンテンツの順(左サイドバー1つ)にする場合

上と同じように、レイアウトを変更したいPHPファイルに、下のコードを追加します。

add_filter( 'genesis_site_layout', '__genesis_return_sidebar_content' );
site-layout-sidebar-content
左サイドバーのレイアウトに指定

3 コンテンツ・サイドバーの順(右サイドバー1つ)にする場合

add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' );
full-width-before
右サイドバーのレイアウトに指定

4 サイドバー・コンテンツ・サイドバーの順(サイドバー2つ)にする場合

add_filter( 'genesis_site_layout', '__genesis_return_sidebar_content_sidebar' );
site-layout-sidebar-content-sidebar
サイドバー2つのレイアウトに指定

5 コンテンツ・サイドバー・サイドバーの順(サイドバー2つ)にする場合

add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar_sidebar' );

site-layout-content-sidebar-sidebar

6 サイドバー・サイドバー・コンテンツの順(サイドバー2つ)にする場合

add_filter( 'genesis_site_layout', '__genesis_return_sidebar_sidebar_content' );

site-layout-sidebar-sidebar-content

関連記事

  • widget-area-1
    2017年9月13日

    Genesis子テーマからウィジェットエリアを追加する方法

  • 2016年3月20日

    Genesisサイトのカスタマイズをもっと便利にするショートコードの使い方

  • 2016年5月13日

    GenesisサイトにBody Classを追加する方法

  • studiopress-logo
    2017年12月17日

    Genesisサイトで「もっと読む」リンクの文字を変更する方法

  • 2016年3月31日

    【安全カスタマイズ】Genesisカスタマイズ用PHP/CSSファイルの作り方

  • Genesis Framework カスタマイズ

日本人のためのGenesisフレームワーク専用WordPressテーマ 『Muromachi』

SEOやセキュリティのプロから信頼されるGenesisフレームワークのメリットを生かしながら、日本人向けに見やすさや使いやすさ、機能性を追求しました。 Genesisサイトの制作ノウハウやウェブサイトの運営経験が詰まったWordPressテーマです。企業サイトはもちろん、ブログやアフィリエイトサイトなど、様々な用途にお使いいただけます。

詳しく見る
← 前の記事
たった1行のコードでGenesisサイトのレイアウトを変更する方法
Genesis専用子テーマ『Metro Pro』の特徴
次の記事 →
たった1行のコードでGenesisサイトのレイアウトを変更する方法
Genesis子テーマからウィジェットエリアを追加する方法

最初のサイドバー

Genesis WP Fan

Genesis WP Fan

たいやき伝道師

Genesisが好きすぎてGenesisフレームワークの情報サイトGenesis WP Fanを運営しています。日本人のためのGenesisフレームワーク専用WordPressテーマ『Muromachi』を開発しました。

Follow

サイト内検索

カテゴリー

タグ

FontAwesome Genesisの設定 Meta Muromachi ウィジェット カテゴリアーカイブ サムネイル ショートコード タグアーカイブ ツール パンくずリスト フッター プラグイン ヘッダー レイアウト 固定ページ 投稿 日本語化 検索関連 管理画面 記事一覧

PVランキング

  • 1genesis-featured-posts-widget-11

    Genesis Featured Postsウィジェットの使い方

  • 2genesis-child-themes

    Genesisフレームワークでブログを作るのに鉄板のGenesis子テーマ12選

  • 3genesis-seo-settings-4

    Genesis SEO Settings の設定方法

  • 4

    競合サイトに差をつけるGenesisサイト運営のためのプラグイン27選

  • 5genesis-logo

    Genesis Frameworkをインストールする方法

  • 6genesis

    【まずはここから】GenesisとGenesis子テーマをダウンロードする方法

  • 7

    GenesisフレームワークとGenesis子テーマを日本語化する方法

  • 8

    ここ最近人気のGenesis子テーマ10選を紹介してみる

  • 9

    【100種類目前!】変幻自在のGenesis子テーマとは?

  • 10metro-pro-settings-thumbnail

    Genesisサイトの設定方法【MetroPro】

最近の投稿

  • 店舗サイトにオススメなGenesisフレームワーク専用子テーマ6選【WordPress】

  • 調べたいサイトを丸裸にするサイト内検索とページ内検索の使い方【簡単絞り込み検索】

  • WWWって何?意外と知らないウェブについてやさしく解説【World Wide Web】

  • 仕事をするときに気をつけたいGenesisフレームワークのライセンスについて整理してみた

  • 日本人向けGenesisフレームワーク専用のWordPressテーマ「Muromachi」販売のお知らせ

  • 404ページも魅力的に簡単カスタマイズ!Genesis専用プラグインで404ページをカスタマイズする方法

  • Genesis専用子テーマ『Academy Pro』の特徴

  • ここ最近人気のGenesis子テーマ10選を紹介してみる

  • Genesisサイトの投稿にPost Classを追加する方法

  • Genesis専用プラグインでレイアウト機能を簡単に拡張する方法【Genesis Layout Extras】

目次

  • PHPファイルにコードを追加
    • 1 横幅100%にする場合
    • 2 サイドバー・コンテンツの順(左サイドバー1つ)にする場合
    • 3 コンテンツ・サイドバーの順(右サイドバー1つ)にする場合
    • 4 サイドバー・コンテンツ・サイドバーの順(サイドバー2つ)にする場合
    • 5 コンテンツ・サイドバー・サイドバーの順(サイドバー2つ)にする場合
    • 6 サイドバー・サイドバー・コンテンツの順(サイドバー2つ)にする場合
ページトップへ

Copyright © 2023 Genesis WP Fan All Rights Reserved.