skip to Main Content

管理サイドバー

説明

管理画面サイドバーのカスタマイズができます。

 

追加できるアイテム

サイドバーアイテムやHTML、カスタムリンク、区切り線を設定できます。

既に存在するメニューアイテムはメニュータイトルとアイコンが変更できます。

既に存在するメニューアイテム

存在するサイドバーメニューアイテム
存在するサイドバーメニューアイテム

 

 

カスタムリンク

カスタムリンクは外部リンクの設定もすることができます。ショートコードも利用できます。

カスタムリンクサイドバーメニューアイテム
カスタムリンクサイドバーメニューアイテム

 

 

カスタムHTML

カスタムHTMLは自由にHTMLを記述することができます。ショートコードも利用できます。

HTMLサイドバーメニューアイテム
HTMLサイドバーメニューアイテム

 

 

 

ユーザーアバターをサイドバーに設定する

サイドバーアイテムにユーザーアバターを表示することができます。 🙂

ユーザーアバターサイドバーアイテム
ユーザーアバターサイドバーアイテム

 

カスタムHTMLメニューアイテムを追加して以下のコードを記入します。

<div id="side-avatar">
  <a href="[mywp_url admin='1']profile.php">
    <span class="avatar">[mywp_user field="avatar" size="100"]</span>
    <span class="name">Howdy, [mywp_user field="name"]</span>
  </a>
</div

CSS コード


body.wp-admin #side-avatar {
  margin-top: 30px;
  margin-bottom: 20px;
}
body.wp-admin #side-avatar .avatar,
body.wp-admin #side-avatar .name {
  display: block;
  margin: 0 auto;
  text-align: center;
}
body.wp-admin #side-avatar .name {
  color: #9e9e9e;
}
body.wp-admin #side-avatar .avatar img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin-bottom: 6px;
}
ユーザーアバター画像のためのCSS入力
ユーザーアバター画像のためのCSS入力

 

 

カスタムメニューUI

この設定はサイドバーにいくつかの効果を追加することができます。

親メニューの開閉をするとき、背景にぼかし効果が適用されます。

 

キャッシュについて

このカスタマイズはサイドバーメニューをキャッシュすることができ、少しだけ読み込みが早くなることが期待できます。サイドバーメニューアイテムをカスタマイズしても適用されない場合、キャッシュ設定をご確認ください。

 

This Post Has 0 Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Back To Top