WordPress GeneratePressテーマサイドバーの幅を調整する方法

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

ワードプレスGeneratePressテーマのデフォルト設定を使用する場合は、サイドバーの幅が狭い方です。 GeneratePressテーマサイドバーの幅を調整するためのいくつかの方法について説明します。

ワードプレスGeneratePressテーマのサイドバーの幅を調整する方法

GeneratePressテーマ無料版

GeneratePressテーマのサイドバーの幅を25%に指定したい場合は、次のコードスニペットをテーマの関数ファイルに追加します。

// 무료 GeneratePress 테마에서 콘텐츠와 사이드바의 너비 설정하기
add_filter( 'generate_right_sidebar_width','lh_right_sidebar_width' );
function lh_right_sidebar_width() {
        return '25';
}

親テーマの関数ファイルにコードを追加すると、今後のテーマを更新時に修正が消えるので、必ずチャイルドテーマ(子テーマ)を作成チャイルドテーマの関数ファイル(functions.php)に追加してください。

無料GeneratePressテーマを使用している場合は、上記の方法でサイドバーの幅を設定することができます。

GeneratePress有料版(GP Premiumプラグインをインストール)

有料版を利用する場合、テーマをカスタマイズするに幅の比率を設定することができます。 ワードプレスの管理ページ>テーマのデザイン>カスタマイズ> Layout> Sidebars左サイドバーの右側のサイドバーの幅をパーセント単位で設定することができます。

ワードプレスGeneratePressテーマサイドバーの幅を調整する

Left Sidebar Width または Right Sidebar Widthを希望する幅に設定してください。

ちなみにコンテナの幅は テーマのデザイン>カスタマイズ> Layout> Containerで調整することができます。

固定幅に設定する方法

このブログでは、現在のPCベースで、サイドバーの幅を340pxに固定されています。 特定の値に固定したい場合は、次のようなCSSコードを テーマのデザイン>ユーザー定義>追加CSSに追加することができます。

/* GeneratePress 테마 사이드바 폭을 340px으로 고정 */
@media (min-width: 769px) {
    #right-sidebar {
        width: 340px;
    }
    #primary {
        width: calc(100% - 340px);
    }
   }

CSSコードを追加しても、実際のサイトに反映さない場合には、キャッシュプラグインのキャッシュとブラウザのキャッシュを削除した後確認すると、変更が適用されます。

おわりに

以上でGeneratePressテーマでサイドバーのサイズを変更する方法について説明しました。 GeneratePressは機能を最小限にして速度に最適化されテーマとしてカスタムして使用するのに良いテーマです。

ああ、海のような人気の多目的テーマは、多くのテーマのオプションと機能が提供されるので、使い方を身につけ、かなりのサイトを作成することができますが、サイトが最適化されなければ重くなって遅くなることがあります。

参考



コメントを残す