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つの重要な目的を達成することを目的としています。
- WordPressエディターブロック内のドキュメントにMarkdownを使用します。
- ユーザーの言語に基づいてドキュメント翻訳を実装します。
マークダウンコンテンツのロード
/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 サイトの他の関連記事を参照してください。

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか?新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

この記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

ホットトピック









