コンテンツマーケティング
WordPress キーボード ショートカット: WordPress 管理バーを表示または非表示にするキーボード ショートカットを追加します。
WordPress では、ユーザーの生産性を向上させるためのさまざまなキーボード ショートカットを提供しています。これらのショートカットは Windows および MacOS オペレーティング システム用に調整されており、コンテンツ編集からコメント管理まで WordPress の使用に対応します。これらのショートカットを見てみましょう:
WordPress ブロックエディターのショートカット
MacOSの
- オプション + コントロール + o: ブロック ナビゲーション メニューを開きます。
- オプション + コントロール + n: エディターの次の部分に移動します。
- オプション + コントロール + p: エディターの前の部分に移動します。
- fn + オプション + F10: 最も近いツールバーに移動します。
- コマンド + オプション + Shift + m: ビジュアルエディタとコードエディタを切り替えます。
Windows
- Ctrl + Shift + o: ブロック ナビゲーション メニューを開きます。
- Ctrl+Shift+n: エディターの次の部分に移動します。
- Ctrl + Shift + P: エディターの前の部分に移動します。
- Fn + Ctrl + F10: 最も近いツールバーに移動します。
- Ctrl + Shift + Alt + m: ビジュアルエディタとコードエディタを切り替えます。
WordPress クラシックエディターのキーボードショートカット
MacOSの
- コマンド + y: 最後の操作をやり直します。
- コマンド + オプション + [数字]: 見出しのサイズを挿入します (例: h1 の場合は Command + Option + 1)。
- コマンド + オプション + l: テキストを左揃えにします。
- コマンド + オプション + j: テキストを両端揃えにします。
- コマンド + オプション + c: テキストを中央揃えにします。
- コマンド + オプション + d:取り消し線を適用します。
- コマンド + オプション + r: テキストを右揃えにします。
- コマンド + オプション + u: 順序なしリストを作成します。
- コマンド + オプション + a:リンクを挿入します。
- コマンド + オプション + o: 番号付きリストを作成します。
- コマンド + オプション + S:リンクを削除します。
- コマンド + オプション + q: テキストを引用符としてフォーマットします。
- コマンド + オプション + m:画像を挿入します。
- コマンド + オプション + T:「その他」タグを挿入します。
- コマンド + オプション + p:改ページタグを挿入します。
- コマンド + オプション + w: ビジュアルエディターの全画面モードを切り替えます。
- コマンド + オプション + f: テキスト エディターで全画面モードを切り替えます。
Windows
- Ctrl + y: 最後の操作をやり直します。
- Alt + Shift + [数字]: 見出しのサイズを挿入します (例: Alt + Shift + 1 の場合)。
- Altキー+ Shiftキー+ S: テキストを左揃えにします。
- Altキー+ Shiftキー+ J: テキストを両端揃えにします。
- Altキー+ Shiftキー+ C: テキストを中央揃えにします。
- Altキー+ Shiftキー+ D:取り消し線を適用します。
- Altキー+ Shiftキー+ R: テキストを右揃えにします。
- ALT + SHIFT + U: 順序なしリストを作成します。
- Altキー+ Shiftキー+ A:リンクを挿入します。
- Altキー+ Shiftキー+ O: 番号付きリストを作成します。
- Altキー+ Shiftキー+ S:リンクを削除します。
- Alt + Shift + q: テキストを引用符としてフォーマットします。
- Altキー+ Shiftキー+メートル:画像を挿入します。
- Altキー+ Shiftキー+ T:「その他」タグを挿入します。
- Altキー+ Shiftキー+ P:改ページタグを挿入します。
- ALT + SHIFT + W: ビジュアルエディターの全画面モードを切り替えます。
- Alt + Shift + f: テキスト エディターで全画面モードを切り替えます。
数年前、私たちはサイトを表示するときに管理バーを非表示にし、代わりにポップアップ ナビゲーションを使用するプラグインを作成しました。僕らはそう呼んだ テレポート。テスト後、デプロイしたメソッドを使用するとサイトの読み込み時間が遅くなることが判明したため、プラグインは更新しませんでした。
WordPress 管理バーを表示または非表示にするキーボード ショートカット
私は、サイトにログインしているときの WordPress のビルトイン管理バーが好きですが、サイトを表示しようとしているときは好きではありません。そこで、ご自身で導入していただきたい変更を書きました。ログインしているときにサイトを表示したときに WordPress 管理バーを表示または非表示にするキーボード ショートカットです。
MacOSの
- オプション + コントロール + x: 管理者メニュー バーを切り替えます。
Windows
- Ctrl + Shift + x: 管理者メニュー バーを切り替えます。
管理バーが読み込まれると、上にスライドします。これを切り替えると、ページが上下にスライドします。
このコードを子テーマのfunctions.phpに追加します。
add_action('wp_enqueue_scripts', 'enqueue_adminbar_shortcut_script');
function enqueue_adminbar_shortcut_script() {
if (is_user_logged_in()) {
wp_enqueue_script('jquery');
add_action('wp_footer', 'add_inline_admin_bar_script');
}
}
function add_inline_admin_bar_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function(jQuery) {
var adminBar = jQuery('#wpadminbar');
var body = jQuery('body');
// Check if the admin bar exists and set the initial styling
if (adminBar.length) {
var adminBarHeight = adminBar.height();
// Hide the admin bar and adjust the body's top margin
adminBar.hide();
body.css('margin-top', '-' + adminBarHeight + 'px');
jQuery(document).keydown(function(event) {
// Toggle functionality on specific key combination
if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.which === 88) {
if (adminBar.is(':visible')) {
adminBar.slideUp();
body.animate({'margin-top': '-' + adminBarHeight + 'px'}, 300);
} else {
adminBar.slideDown();
body.animate({'margin-top': '0px'}, 300);
}
}
});
}
});
</script>
<?php
}
説明
- このスクリプトは最初に、管理バー (
#wpadminbar
)が存在します。そうである場合、スクリプトはその高さを計算します。 - 次に、管理バーを非表示にし、
margin-top
body
jQuery を使用して、要素を管理バーの高さの負の値に設定します。これにより、最初は管理バーが非表示になり、ページのコンテンツが上に移動します。 - keydown イベント リスナーは、管理バーの表示/非表示を切り替え、
margin-top
body
管理バーをスムーズに表示または非表示にします。