ベストセラー人気 WordPress テーマTop 30 詳細

bbPressをサポートするコードハイライター、シンタックスハイライタープラグインEnlighter

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

WordPressでフォーラム掲示板を運営したい場合は、bbPressプラグインを使用できます。 bbPressとBuddyPressを一緒に使用してコミュニティを運営できます。 bbPressが韓国型掲示板とはレイアウトが違って異質感を感じることができますが、ある程度カスタムを通じてレイアウトは同様に実装することが可能でしょう。

bbPressの投稿/回答エディタでコードハイライト機能が必要な場合は、Crayon Syntax Highlighterプラグインを使用できますが、このプラグインは6年以上更新されていません。 このプラグインの代替案を見つけて、いくつかのシンタックスハイライタープラグインをテストした後、Enlighterというコードハイライタープラグインを選択しました。

bbPressをサポートするコードハイライター、シンタックスハイライタープラグインEnlighter

Crayon Syntax Highlighterプラグインの代わりに、bbPressをサポートすると紹介する構文ハイライターのいくつかをインストールして、実際に正しく動作するかどうかをテストしてみました。

まず見たのは Urvanov Syntax Highlighterというプラグインです。 このプラグインはCrayon Syntax Highlighterの転生(Reincarnation)と紹介していますが、(私が間違って設定しているのかもしれませんが)bbPressでは正しく動作しませんでした。

いくつかの構文ハイライトプラグインをテストしたところ、EnlighterはbbPressで好きなように動作しました。

bbPressをサポートするコードハイライタープラグインEnlighter

エンライターは使いやすい無料 WordPress用シンタックスハイライティングツールとして EnlighterJS JavaScriptライブラリの構文表示機能を提供します。

Englighter 構文ハイライターを bbPress で使用するには、まず次のコードをテーマの関数ファイルに追加し、bbPress で ビジュアルエディタ(Visual Editor)を有効にするようにします。

// Enable Visual Editor in bbPress

add_filter('bbp_after_get_the_content_parse_args', function($args = array()){
    $args['tinymce'] = true;
    $args['teeny'] = false;
    $args['quicktags'] = false;
    
    return $args;
});

// Source - https://wordpress.org/support/topic/how-can-i-activate-enlighter-button-on-bbpress/

その後、 WordPress 管理者ページ > Englighter > Editing > Classic Editor タブに移動して Frontend Integration(フロントエンド統合)有効にしますに設定します。

WordPress Englighterプラグインフロントエンド統合

これで、bbPressで投稿を作成したり回答を作成したりすると、ビジュアルエディタにコードハイライターアイコンが追加されていることがわかります。

WordPress bbPress構文ハイライター

シンタックスハイライターアイコンをクリックすると Code Insert – EnlighterJS Syntax Highlighter ポップアップが表示され、コードを挿入できます。

bbPressをサポートするコードハイライタープラグインEnlighter - 構文ハイライト機能

Englighterは、次のコードハイライタープラグイン/機能と互換性があります(移行)。

  • Crayon互換モード(レガシーCrayon preコードブロックにEnlighterJSハイライト機能を使用)
  • CodeColorer互換モード(従来のCodeColorerショートコードにEnlighterJSハイライト機能を使用)
  • Jetpackマークダウン互換モード(通常または生のハイライト)
  • Gutenberg 標準コードブロック互換モード(言語属性なし)

また、このプラグインは 拡張機能 メニューから bbPressショートコード+マークダウンコードブロックをサポートを有効にすることができます。

高度なエディタツール (以前の名前「TinyMCE Advanced」)プラグインをインストールする場合は、次のコードをテーマ関数ファイルに追加すると、bbPressでTinyMCE Advancedを利用できます。 ただし、Enlighterコード挿入アイコンは表示されませんでした。

// Enable TinyMCE Advanced Visual Editor in bbPress
function bbp_enable_visual_editor( $args = array() ) {
    $args['tinymce'] = true;
    $args['teeny'] = false;
    return $args;
}
add_filter( 'bbp_after_get_the_content_parse_args', 'bbp_enable_visual_editor' );

// Soucre - https://codex.bbpress.org/enable-visual-editor/ 

最後に、

bbPress掲示板にコードスニペットを表示する必要がある場合は、この記事で紹介する構文ハイライティングプラグインを使用できます。 このプラグインは現在20,000以上 WordPress サイトにインストールされ使用されており、最近までアップデートが行われています。

参照



コメントを残す

コメント