WordPressブロックエディターでのマークダウンとローカリゼーションを使用します

WordPressエディター内にドキュメントを直接表示する必要がありますか？この記事では、合理化されたドキュメント管理とローカリゼーションのマークダウンを活用して、最適なアプローチを調査します。

ReactコンポーネントとHTMLは直感的に見えるかもしれませんが、広範なドキュメントのためにすぐに扱いにくく維持するのが難しくなる可能性があります。モーダルのドキュメントを示す以前の記事のこの例を考えてみましょう。

 const cachecontroldescription =（）=> {
  戻る （
    <p>キャッシュコントロールヘッダーに<code>no-store if the max-age is 0</code>
  ））
}</p>

Markdownはよりクリーンなソリューションを提供します。上記は、マークダウンファイル（ /docs/cache-control.md ）にリファクタリングできます。

キャッシュコントロールヘッダーには、リクエストに関連するすべてのフィールド/ディレクティブからの最小最大年齢の値が含まれます。

Markdown vs. HTML：利点と短所

Markdownはプロセスを簡素化しますが、ポットファイルを使用して簡単に翻訳できるReactコンポーネントとは異なり、組み込みのローカリゼーションサポートがありません。ローカリゼーションは非常に重要であるため、この制限に対処します。この記事は、2つの重要な目的を達成することを目的としています。

1. WordPressエディターブロック内のドキュメントにMarkdownを使用します。
2. ユーザーの言語に基づいてドキュメント翻訳を実装します。

マークダウンコンテンツのロード

/docs/cache-control.mdが作成されていると、HTMLコンテンツをインポートおよびレンダリングできます。

 '../docs/cache-control.md'からのcachecontroldocumentationをインポートします。

const cachecontroldescription =（）=> {
  戻る （
    <div dangerouslysetinnerhtml="{{" __html: cachecontroldocumentation></div>
  ）;
}

これは、WordPressエディターのコアモジュールバンドラー（バージョン4.42）であるWebpackに依存しています。 MarkdownとHTMLローダーを処理するように、Webpackの構成をカスタマイズします。

ブロックのルートでwebpack.config.jsを作成します。

 const defaultconfig = require（ '@wordpress/scripts/config/webpack.config'）;

module.exports = {
  ... defaultconfig、
  モジュール：{
    ... defaultconfig.module、
    ルール：[
      ... defaultconfig.module.rules、
      {
        テスト：/\.md$/、
        使用： [
          {Loader： "HTML-Roader"}、
          {ローダー：「マークダウンローダー」}
        ]
      }
    ]、、
  }、
};

必要なパッケージをインストールします：

 npmインストール -  save-dev markdown-roader html-roader

改善された組織については、Webpackエイリアス（ @docsを指す/docs ）を追加します。

 const path = require（ 'path'）;
config.resolve.alias ['@docs'] = path.resolve（process.cwd（）、 'docs/'）;

今では輸入が簡素化されます：

 '@docs/cache-control.md'からのcachecontroldocumentationをインポートします。

ローカライズドキュメント

直接マークダウンの翻訳は実行不可能であるため、言語固有のマークダウンファイルを作成します。

• /docs/en/cache-control.md
• /docs/fr/cache-control.md
• /docs/zh/cache-control.mdなど。

このアプローチは、領域固有のバリエーション（ /docs/en_US/cache-control.mdなど）を処理することもできます。

ユーザー言語の取得

ユーザーの言語はget_locale()を使用して取得され、解析されて言語コードを抽出します。

関数get_locale_language（）：string {
  $ localeparts = Explode（ '_'、get_locale（））;
  $ localeparts [0]を返します。
}

この言語コードはwp_localize_script()を介してブロックに渡されます。

 wp_localize_script（
  $ blockscriptregistrationName、
  「graphqlapicachecontrol」、
  [
    'userlang' => get_locale_language（）、
  ]
）;

window.graphqlApiCacheControl.userLangとしてブロックにアクセスできるようになりました。

動的なインポート

ユーザーの言語は実行時にのみ知られているため、動的なインポートを使用します。

 const lang = window.graphqlapicachecontrol.userlang;
import（ `@docs/$ {lang}/cache-control.md`）.then（module => {
  // ...
}）;

コンテンツはobj.defaultを介してアクセスされます。

 const cachecontrolcontent = import（ `@docs/$ {lang}/cache-control.md`）.then（obj => obj.default）;

これは、 getMarkdownContent関数にカプセル化されています。

 const getMarkDownContent =（filename、lang）=> {
  return import（/ * webpackchunkname： "docs/[request]" */`@docs/$ {lang}/$ {filename} .md`）
    .then（obj => obj.default）;
};

/* webpackChunkName: "docs/[request]" */ commentは、組織化されたチャンク管理を保証します。

パブリックパスを設定します

publicPathは、Webpackが動的にロードされたチャンクを見つけるために重要です。これは、ハードコーディング、環境変数を介して設定する、または実行時に渡されることができます。この例では、渡します。

 $ blockpublicpath = plagin_dir_url（__ file__）。 '/blocks/cache-control/build/';
wp_localize_script（
  $ blockscriptregistrationName、
  「graphqlapicachecontrol」、
  [
    // ...
    「publicpath」=> $ blockpublicpath、
  ]
）;

次に、JavaScript側に設定します。

 __webpack_public_path__ = window.graphqlapicachecontrol.publicpath;

デフォルトの言語フォールバック

フォールバックメカニズムは、欠落している翻訳を処理します：

 const getMarkDownContentOruseDefault =（filename、defaultlang、lang）=> {
  return getMarkDownContent（Filename、Lang）
    .catch（err => getMarkDownContent（filename、defaultlang））;
};

モーダルとの統合

最後に、マークダウンコンテンツはモーダルに統合されます。

 '@wordpress/element'から{ueseState、useefcect}をimportします。
// ...その他の輸入

const cachecontrolcontentmodal =（props）=> {
  // ...
  const [page、setpage] = uesestate（[]）;

  effect（（）=> {
    GetMarkDownContentorUsedEfault（Filename、DefaultLang、Lang）。
      setpage（value）;
    }）;
  }、[]）;

  戻る （
    <contentmodal content="{page}"></contentmodal>
  ）;
};

このアプローチは、WordPressエディター内の堅牢で保守可能な、ローカライズされたドキュメントシステムを提供します。

以上がWordPressブロックエディターでのマークダウンとローカリゼーションを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。