نظرة أعمق في محرر نصوص وورد بريس

عندما نقوم بإنشاء أو تحرير منشور في وورد بريس ، لدينا محررين للمحتوى للاختيار من بينها: محرر TinyMCE المرئي ومحرر نصوص وورد بريس. يتكون الأخير من عنصر منطقة نص تم تحسينه بواسطة أزرار توفر طريقة سريعة لإدخال كود HTML في محتوى المنشور.

يمكن للمستخدمين التبديل بسهولة من الوضع المرئي إلى وضع النص بالنقر فوق الملصقات اليمنى العلوية. سيحتفظ وورد بريس بمحتوى المنشور ، لكن TinyMCE ستحول الأحرف الخاصة إلى كيانات HTML المقابلة. لهذا السبب ، قد تفضل

القراءة الموصى بها :

الغوص في محرر Gutenberg وورد بريس الجديد (إيجابيات وسلبيات)

ما الجديد في وورد بريس 5.0 (كيفية الاستعداد لـ Gutenberg)

في محرر النص يظهر بالضبط هيكل HTML لمحتوى آخر، وتمنحه السيطرة الكاملة على إدخال المستخدم، لذلك هذا المنصب هو كل شيء عن محرر النصوص وورد. أولاً ، سوف نتعمق في الموضوع من منظور المطور: سننظر في Quicktags JS API ، ومرشح quicktags_settings ، ووظيفة wp_editor () .

القسم الأخير من هذا المنشور مخصص لغير المطورين. سأقدم لك مكونًا إضافيًا يتيح للمستخدمين تكوين محرر النص من لوحة إدارة وورد بريس بسرعة.

مقارنة بين المحررات المرئية والنصية

مقارنة بين المحررات المرئية والنصية.

محرر نصوص ووردبريس

إما إذا كنت معتادًا على إضافة الكثير من التعليمات البرمجية إلى مشاركاتك ، أو إذا كنت ترغب في معاينة بنية HTML الدقيقة للمحتوى الخاص بك ، فقد تفضل محرر النصوص المجردة على سهولة استخدام المحرر المرئي المتقدم.

ومع ذلك ، فإن محرر النصوص ليس مجرد عنصر نموذج. يوفر شريط أدوات المحرر مجموعة من الأزرار (تسمى العلامات السريعة) التي تتيح للمستخدمين إدخال عدد كبير من العلامات بسرعة في بنية منشور HTML.

بشكل افتراضي ، يوفر وورد بريس العلامات السريعة التالية:

أ

قوي

الشفرة

ديل

م

رأ

ماي

لي

IMG

blockquote

الإضافية

شاشة كاملة

ابحث عن

أغلق

تُظهر الصورة الأزرار الافتراضية لمحرر نصوص وورد بريس

تُظهر الصورة الأزرار الافتراضية لمحرر نصوص وورد بريس

يمكن تجاوز الإعدادات الافتراضية بفضل Quicktags API . توفر JavaScript API طريقة سهلة لإضافة أزرار مخصصة وإدخال التعليمات البرمجية والمحتوى في منطقة نص المحرر.

و QTags.addButton يضيف طريقة زر إلى شريط الأدوات وتعرف على النحو التالي:

QTags.addButton( 
	id, 
	display, 
	arg1, 
	arg2, 
	access_key, 
	title, 
	priority, 
	instance );

تحافظ هذه الطريقة على المعلمات التالية:

معرف ( سلسلة ) (مطلوب) هو معرف HTML للزر ؛

display ( سلسلة ) (مطلوبة) هي قيمة HTML ؛

arg1 ( سلسلة ) (مطلوب) هي علامة الفتح المراد تضمينها أو وظيفة رد اتصال مخصصة ليتم تشغيلها عند النقر فوق الزر ؛

arg2 ( سلسلة ) (اختياري) هي علامة الإغلاق ؛

access_key ( سلسلة ) (اختياري) هو مفتاح اختصار للزر ؛

العنوان ( سلسلة ) (اختياري) هو عنوان HTML ؛

الأولوية ( int ) (اختياري) هي رقم يمثل موضع الزر في شريط الأدوات ؛

المثيل ( سلسلة ) (اختياري) يحد الزر على مثيل معين من Quicktags.

لنفترض الآن أننا نرغب في إضافة العلامات المطلوبة بواسطة أداة تمييز بناء الجملة مثل Prism ، ونود تزويد شريط أدوات المحرر بأزرار تطبع العلامات التالية:

<pre><code class="language-php"></code></pre>
<pre><code class="language-css"></code></pre>
<pre><code class="language-html"></code></pre>

لإنجاز هذه المهمة ، نحتاج إلى إضافة الكود التالي إلى الملف الرئيسي للمكوِّن الإضافي:

function my_quicktags() {
	if ( wp_script_is( 'quicktags' ) ) {
	?>
	<script type="text/javascript">
	QTags.addButton( 'eg_php', 'PHP', '<pre><code class=\"language-php\">', '</code></pre>', 'p', 'PHP Code', 100 );
	QTags.addButton( 'eg_css', 'CSS', '<pre><code class=\"language-css\">', '</code></pre>', 'q', 'CSS Code', 100 );
	QTags.addButton( 'eg_html', 'HTML', '<pre><code class=\"language-html\">', '</code></pre>', 'r', 'HTML Code', 100 );
	</script>
	<strong><?php</strong>
	}
}
add_action( 'admin_print_footer_scripts', 'my_quicktags' );

admin_print_footer_scripts هو خطاف إجراء يستخدم لطباعة البرامج النصية في تذييل صفحة المسؤول. تتحقق وظيفة رد الاتصال مما إذا كان البرنامج النصي للعلامات السريعة قيد الاستخدام ، ثم يقوم بطباعة كود JS.

يضيف هذا البرنامج النصي ثلاثة أزرار أخرى إلى أي مثيل لـ Quicktags في لوحة الإدارة ، كما هو موضح في الصورة أدناه.

تظهر الصورة أزرارنا المخصصة الجديدة

تظهر الصورة أزرارنا المخصصة الجديدة.

تعد إضافة الأزرار إلى شريط أدوات المحرر أمرًا سهلاً نسبيًا ، ولكن يمكننا فعل المزيد باستخدام Quicktags API. على سبيل المثال ، يمكننا تمرير طريقة QTags.addButton إلى وظيفة رد الاتصال ليتم تشغيلها عندما ينقر المستخدم على الزر المقابل. ضع في اعتبارك الكود التالي:

function custom_quicktags() {

	if ( wp_script_is( 'quicktags' ) ) {
	?>
	<script type="text/javascript">
	QTags.addButton( 'eg_callback', 'CSS div', css_callback );

	function css_callback(){
		var css_class = prompt( 'Class name:', '' );

		if ( css_class && css_class !== '' ) {
			QTags.insertContent('<div class="' + css_class +'"></div>');
		}
	}
	</script>
	<strong><?php</strong>
	}
}
add_action( 'admin_print_footer_scripts', 'custom_quicktags' );

css_callback هي وظيفة JS مخصصة يتم تشغيلها عندما ينقر المستخدم على الزر المخصص. في مثالنا ، تطالب الوظيفة بمربع إدخال للسماح للمستخدمين بتعيين اسم فئة لعنصر div .

و QTags.insertContent وطريقة طباعة السلسلة المحددة في جزء النص المحرر.

تطالب وظيفة رد الاتصال في مثالنا بمربع إدخال للسماح للمستخدمين بتعيين اسم فئة

تطالب وظيفة رد الاتصال الخاصة بمثالنا بمربع إدخال يسمح للمستخدمين بتعيين اسم فئة.

حتى الآن ، قمنا بإضافة علامات سريعة إلى محرر وورد بريس في صفحات المسؤول بفضل إجراء admin_print_footer_scripts . إذا كان لديك أي نسخ محرر في الواجهة الأمامية للموقع ، فيجب ربط وظيفة رد الاتصال بإجراء wp_print_footer_scripts بدلاً من ذلك.

على أي حال ، في الإنتاج ، يجب أن تفكر في إدراج ملفات JavaScript الخاصة بك في نصوص وورد بريس مسجلة ، كما هو موضح في How to Enqueue your Assets in وورد بريس . أداة مفيدة لإنشاء علامات سريعة مخصصة هي Quicktags Generator بواسطة GenerateWP.

تجاوز إعدادات Quicktags

توفر واجهة برمجة تطبيقات Quicktags طريقة لإضافة أزرار جديدة إلى شريط الأدوات. يتيح لنا وورد بريس إزالة الأزرار أيضًا ، وذلك بفضل مرشح quicktags_settings.

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

function my_quicktags( $qtInit, $editor_id = 'content' ) {
	$qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close';
	return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );

تحتفظ وظيفة رد الاتصال بمتغيرين : $ qtInit عبارة عن مصفوفة من الإعدادات ، و $ editor_id هو المعرف الفريد للمحرر. في مثالنا ، يتم تعيين $ editor_id افتراضيًا إلى “محتوى” – معرّف منطقة نص المحرر في تحرير صفحات المنشور .

لاحظ أن أسماء العلامات في قائمة العلامات السريعة مفصولة بفواصل غير متبوعة بمسافات فارغة.

ستتجاوز هذه الوظيفة الإعدادات الافتراضية ويمكن استخدامها لإزالة جميع الأزرار من شريط الأدوات أيضًا:

function my_quicktags( $qtInit, $editor_id = 'content' ) {
	$qtInit['buttons'] = ',';
	return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );

لقد قمنا بتعيين فاصلة كقيمة لعنصر “الأزرار” في المصفوفة $ qtInit . لن تعمل السلسلة الفارغة كما هو متوقع ، ولن يتم تجاوز الإعدادات الافتراضية.

تضمين محرر وورد بريس في الصفحات الأمامية

توفر وظيفة wp_editor ، المتوفرة من الإصدار 3.3 ، طريقة سهلة لتضمين محرري وورد بريس في أي مكان على الموقع.

يتم تعريف الوظيفة في ملف wp-include / general-template.php على النحو التالي:

wp_editor( $content, $editor_id, $settings = array() );

المحتوى $ ( سلسلة ) (مطلوب) يحدد المحتوى الأولي للمحرر ؛

يحدد $ editor_id ( سلسلة ) (مطلوب) سمة id لمحرر textarea و TinyMCE (يمكن أن يحتوي فقط على أحرف صغيرة وشرطات سفلية) ؛

إعدادات $ ( صفيف ) (اختياري) مصفوفة من المتغيرات.

تسمح مصفوفة الوسائط بتعيين الكثير من معلمات التكوين لكلا المحررين. يمكن أن تمرر وسيطة معينة الإعدادات مباشرة إلى Quicktags (انظر القائمة الكاملة للوسيطات في Codex).

هل تعاني من مشاكل التوقف و وورد بريس؟ Kinsta هو حل الاستضافة المصمم لتوفير الوقت! تحقق من ميزاتنا

كمثال ، قد ترغب في تضمين المحرر في قالب الصفحة. ضع في اعتبارك المثال التالي:

$content = '';
	$editor_id = 'mycustomeditor';
	$settings = array( 
		'wpautop' => false, 
		'media_buttons' => false, 
		'quicktags' => array(
				'buttons' => 'strong,em,del,ul,ol,li,block,close'
			),
	);
wp_editor( $content, $editor_id, $settings );

هذه الأسطر القليلة من التعليمات البرمجية تطبع محررًا فارغًا بمعرف “myeditor” والأزرار المحددة في شريط أدوات محرر النصوص.

و wpautop تم تعيين حجة لذلك زائفا بأن <p>العناصر سوف تستخدم لالتفاف الفقرات إلى المحرر.

تم تعيين الوسيطة media_buttons على “خطأ” حتى لا يتمكن المستخدم من تحميل ملفات الوسائط.

و quicktags تحدد مجموعة الأزرار لتظهر في شريط أدوات محرر النص.

بالنسبة لمحرر نصوص وورد بريس ، يتمثل الاختلاف الرئيسي بين وظيفة wp_editor () ومرشح quicktags_settings في أن الوظيفة تنطبق على مثيل معين من المحرر. يمكنك استخدامه لتضمين برامج التحرير الجديدة في أي مكان على الموقع (مثل قوالب الصفحة) ، بينما يقوم Quicktags_settings بتصفية جميع الطبعات الموجودة ولا يمكن استخدامه لإنشاء نسخ محرر جديدة.

الكود الكامل للأمثلة أعلاه متاح على Gist .

تحسين محرر نصوص وورد بريس باستخدام البرنامج المساعد AddQuicktag

إذا كنت بحاجة إلى أداة لإضافة أزرار إلى محرر نصوص وورد بريس بسرعة ، فإن AddQuicktag هو المكون الإضافي المناسب لك.

AddQuicktag هو مكون إضافي مجاني يسمح للمستخدمين بإضافة زر مخصص إلى محرر نصوص وورد بريس

يسمح AddQuicktag للمستخدمين بإضافة أزرار مخصصة إلى محرر نصوص وورد بريس.

يوفر المكون الإضافي صفحة خيار يمكن الوصول إليها من قائمة الإعدادات . في هذه الصفحة ، يمكن للمستخدم المسؤول إضافة أزرار مخصصة وإزالة الأزرار الموجودة.

يسمح AddQuicktag بتكوين المحرر خصيصًا للمنشورات والصفحات ومناطق النصوص الأخرى التي تم تمكينها بواسطة المحرر (التعليقات وأدوات النص وما إلى ذلك).

يضيف البرنامج المساعد Quicktags إلى المحرر المرئي أيضًا. ما عليك سوى التحقق من خيار »Visual» ، وسيعرض المحرر المرئي قائمة Quicktags المنسدلة مع الأزرار المخصصة.

القسم الثاني من صفحة خيار AddQuicktag مخصص لتكوين العلامات السريعة المضمنة. في هذا القسم ، من الممكن إزالة الأزرار في مناطق نصية معينة.

تمت إزالة ثلاثة أزرار من محرر نصوص صفحات التحرير

تمت إزالة ثلاثة أزرار من محرر نصوص صفحات التحرير

يوفر القسم الأخير وظائف إضافية لشريط أدوات المحرر. يعمل الصف الأول من الخيارات على تحسين زر الرمز الافتراضي ، مما يوفر قائمة تحديد تحدد فئة CSS لعلامة الرمز وفقًا للغة المحددة.

يوفر الصف الثاني زرين يقومان بترميز وفك رموز أحرف خاصة ( كائنات htmlentities ).

ميزات AddQuicktag المتقدمة

ميزات AddQuicktag المتقدمة

ملخص

إذا كنت مطورًا ، فقد تجد أنه من المفيد إضافة سمة أو ميزات خاصة بالمكون الإضافي إلى برامج تحرير وورد بريس. توفر واجهة برمجة تطبيقات Quicktags والعديد من الفلاتر والوظائف أدوات قيمة لإضافة قيمة إلى منتجاتنا. وإذا لم تكن مطورًا ، فيمكنك تكوين برامج تحرير وورد بريس أيضًا ، وذلك بفضل العديد من المكونات الإضافية المتاحة مجانًا في دليل مكونات وورد بريس ، مثل المكون الإضافي AddQuicktag المقدم في هذا المنشور.

هل لديك أي أفكار أخرى حول الميزات القيمة لإضافتها إلى محرر نصوص وورد بريس؟

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

كل ذلك وأكثر من ذلك بكثير ، في خطة واحدة بدون عقود طويلة الأجل ، وعمليات الترحيل المدعومة ، وضمان استرداد الأموال لمدة 30 يومًا. تحقق من خططنا أو تحدث إلى قسم المبيعات للعثور على الخطة المناسبة لك.