デフォルトでは画面上部管理バーを表示すると、WordPress のバックエンド機能にすばやくアクセスできます。しかし、ユーザーによっては管理バーの位置が少し邪魔に感じ、移動させたい、特に外観や位置を変更したいと思うかもしれません。

このチュートリアルではWP独学ウェブサイトビルダーここでは、カスタムCSSを追加してWordPressの管理バーをフッターに移動させる方法、あるいは機能pファイルのコードで同じ効果が得られますが、ログインしていないユーザーのページ表示には影響がありません。

WordPressの管理バーを移動する理由

WordPressの管理バーは、ダッシュボードへのクイックアクセス、ページの編集、コメントの閲覧、プラグインの更新など、さまざまなナビゲーション機能を提供します。強力な機能ですが、デフォルトでページの上部に配置されているため、コンテンツが見えにくくなったり、カスタムデザインと競合する可能性があります。

管理バーをページの下部に移動させることで、特にフロントエンドのデザインを表示するために画面スペースを必要とするユーザーにとって、視覚的なエクスペリエンスが向上します。さらに、特にページ上部のデザインが複雑な場合、ページ全体の美観を向上させ、管理バーをページ下部に移動させることで気が散るのを避けることができます。

予備

チュートリアルに入る前に、準備するものがあります：

1. カスタムCSSをサポートし、ブロックエディタの使用を推奨するテーマ（例えばトゥエンティ トゥエンティ スリー(件名）。
2. サブテーマ(テーマを更新する際に変更が失われないように、最初に子テーマを作成することをお勧めします)。
3. WordPressのバージョンは、互換性を確保するために最新版に更新されている必要があります。

ステップ1：テーマのカスタマイズ

まず、使用するテーマがカスタマイズに対応しているかどうかを確認する必要があります。WordPressのカスタマイズにはいくつかの方法がありますが、最も簡単な方法は"外観 > カスタマイズ"画面で設定します。

1. WordPressサイトにログインし、ダッシュボードに移動します。
2. に移動する。外観 > カスタマイズをクリックしてください。カスタマイズ「ボタン

3. テーマのカスタマイズページで"追加CSS「オプション

子トピックを作成する理由

将来のテーマのアップデートでカスタマイズした内容が上書きされないようにするため、テーマを作成する前に子テーマの使用.子テーマは、オリジナルテーマのコアファイルに影響を与えることなく、テーマに変更を加えることができます。

ステップ2: カスタムCSSの追加

次に、"追加CSS"オプションはWordPressの管理バーにカスタムスタイルを追加し、ページの一番下に移動させます。

カスタムCSSコード

入る追加CSSページが表示されたら、以下のコードをコピー＆ペーストしてください：

ボディ
    margin-top: -28px；
    padding-bottom: 28px；
}
body.admin-barの#wphead {。
    padding-top: 0；
}
body.admin-barの#footer {。
    padding-bottom: 28px；
}
#wpadminbar{。
    top: auto !important；
    底: 0；
}
#wpadminbar .menupop .ab-sub-wrapper {.
    下: 32px；
}

このCSSスニペットは、管理バーをページの上部から下部に移動し、管理バーの新しい位置に合わせてページの上部と下部の間隔を調整します。

通訳コード機能

• margin-top: -28px; padding-bottom: 28px；管理バーがページのコンテンツと重ならないように、ページの上部の間隔を狭め、下部のスペースを空けてください。
• #wpadminbar { top: auto !important; bottom: 0; }.: 管理バーをデフォルトの上部ではなく、ページの下部に固定させます。
• .ab-sub-wrapper { bottom: 32px; }.管理バーのドロップダウンメニューが下に正しく表示されていることを確認してください。

ステップ 3: プレビューと変更の保存

CSSの追加が終わったら、" をクリックします。変更を保存する"ボタンをクリックし、サイトのフロントエンドページに戻って効果を確認してください。

問題がなければ、設定を保存し、変更を公開します。WordPressの管理バーがページの上部から下部に移動しているはずです。

その他の問題と考慮事項

1.未登録ユーザーの表示に関する問題

上記の手順で変更した後、ログインしていないユーザーがサイトを訪問したときに、ページの表示が28px高くなる問題が発生する可能性があります。この問題を解決するには、オプションでfunctions.phpファイルに条件コードを追加することで、ログインしているユーザーだけが管理バーの調整を見ることができ、ログインしていないユーザーは影響を受けません。

ステップ4: functions.phpでコードを追加

管理バーの調整をログインしているユーザーのみに有効にしたい場合は、テーマのfunctions.phpファイルにカスタムコードを追加することで可能です。下記が追加したコードです：

関数 wpg_ubah_posisi_admin_bar() {
    if (is_user_logged_in()) {。
        ?>
        <スタイル
            body {margin-top: -28px; padding-bottom: 28px;}.
            body.admin-bar #wphead {padding-top: 0;}.
            body.admin-bar #footer {padding-bottom: 28px;}.
            #wpadminbar { top: auto !important; bottom: 0;}.
            #wpadminbar .menupop .ab-sub-wrapper { bottom: 32px; }.
        </style>
        <?php
    }
}

add_action('wp_head', 'wpg_ubah_posisi_admin_bar')；

functions.phpコードを追加するには？

1. WordPressのバックエンドにログインし、次のページに移動します。外観 > テーマファイルエディタ.

2. 右側のファイルリストからfunctions.phpドキュメンテーション
3. そのファイルの最後に上記のコードを追加し、" "をクリックします。更新された資料".

このコードにより、管理バーの位置変更はログインしているユーザーにのみ適用され、ログインしていないユーザーには適用されないため、ページが表示される問題を避けることができます。

評決を下す

上記の手順を踏むことで、WordPressの管理バーをページの上部から下部に簡単に移動させることができ、追加のプラグインをインストールする必要もありません。CSS を使ってカスタマイズするにしても、functions.php ファイルに条件コードを追加するにしても、これらの方法を使えば、サイト上で管理バーをよりパーソナライズされた形で表示することができます。