WordPress GeneratePress テーマ垂直方向ヘッダーを設定する

ヘッダーは通常サイトの上部に配置されます。 まれですが、左サイドバーまたは右サイドバー部分にヘッダーを表示するサイトがあります。 Avada, Enfold など WordPress 有料テーマでもヘッダーを垂直方向に表示するオプションとデモを提供します。 GeneratePress テーマは垂直ナビゲーションオプションを提供しませんが、デモを提供します。

• Avada テーマ/Bridge テーマでヘッダの位置を変更する
• Diviテーマヘッダーの位置を変更する[垂直ナビゲーション]

垂直ヘッダレイアウトはSEOに悪いことが知られているので、使用するかどうかを慎重に決定してください。

WordPress GeneratePress テーマ垂直方向ヘッダーを設定する

GeneratePress テーマには、ヘッダーを垂直方向に設定するオプションはありません。

上の図に示すように、ヘッダーをナビゲーション（ヘッダーメニュー）と一緒に配置するときに位置を指定するオプションがありますが、ヘッダーを垂直方向に設定するオプションは表示されません。 ナビゲーションをヘッダーに設定することも可能です。 現在、このブログではナビゲーションをヘッダーに設定して使用しています。

ジェネレートプレステーマでは、XNUMXつの方法で垂直ナビゲーションレイアウトを実装できます。

• サイトライブラリが提供するテンプレート（デモ）の使用
• CSSでヘッダーをサイドバー位置に移動する

GeneratePress 有料版を使用している場合は、サイトライブラリ（Site Library）が提供するテンプレートを使用できます。 サイトライブラリについては、次の記事を参照してください。

• WordPress GeneratePress テーマサイトライブラリのデモを読み込む

Siderというテンプレートがヘッダーを左側に配置しています。

デモをロードしたら、カスタマイズのレイアウトセクションで余白などのレイアウトを自由に調整できます。 うまくいかない場合は、CSSでスタイルを細かく指定できます。

CSSコードを使用してヘッダーを左サイドバーの位置に表示することもできます。 例：

@media (min-width: 1000px) {
    body {
        margin-left: 300px;
    }

    .site-header {
        position: fixed;
        left: 0;
        top: 0;
        width: 300px;
        z-index: 300;
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-overflow-scrolling: touch;
        transition: .1s ease;
    }

    .admin-bar .site-header {
        top: 32px;
    }

    .site-header .main-navigation li {
        float: none;
    }
}

.inside-header {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
}

.site-branding,
.site-logo {
    order: 1;
}

.header-widget {
    order: 3;
}

.nav-float-right .inside-header .main-navigation {
    order: 2;
    float: none;
    margin-top: 30px;
    margin-bottom: 50px;
}

.nav-float-right .header-widget {
    float: none;
    top: auto;
    max-width: 100%;
}

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

.main-navigation.toggled .main-nav li {
    text-align: center !important;
}

カスタムCSSコードは、 ルックス » カスタマイズ » 追加 CSSに追加することができます。

上記のコードがうまくいかない場合 GeneratePress テーマ開発者にサポートを依頼してください。

参照

• GeneratePress テーマから投稿者を削除する方法
• WordPress 関連記事のリストを表示する（feat。 GeneratePress テーマ）
• WordPress Newspaper(Newspaper）テーマデモをインストールする
• WordPress 小見出しスタイルを変更する（GeneratePress, Avada, Enfold, Newspaper、アストラテーマ外）
• Diviテーマ用無料ポケレストランレイアウトパックをダウンロードする
• エレメンターページビルダー（Elementor Website Builder）と Avada テーマのタブに目的のコンテンツを簡単に挿入する方法