WordPress GeneratePress テーマ垂直方向ヘッダーを設定する - WordPress 情報パッケージ
인기 WordPress テーマブルフセール 詳細

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

Last Updated:2022年10月24日| 2のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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

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

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

GeneratePress テーマヘッダーの設定
ヘッダー設定

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

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

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

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

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

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

デモをロードしたら、カスタマイズのレイアウトセクションで余白などのレイアウトを自由に調整できます。 うまくいかない場合は、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 テーマ開発者にサポートを依頼してください。

参照



2のコメント

コメント

  1. ジェネレートを使ってワード様のようにブログを飾るにはどのようにセッティングすればいいですか?

    応答
    • GeneratePress 設定方法については、次の記事を参照してください。

      https://avada.tistory.com/2299

      自分で設定するのが難しい場合 ここでサービス(有料)を依頼できます。 このブログの他に、次のようなレイアウトで設定できます。

      - https://avada.co.kr/
      - https://wpnews.co.kr/

      応答

カフェで WordPress 情報を共有できます。

ありがとうございます!