كيفية استخدام محرر قوالب WordPress

في هذا المنشور ، أعلمك كيفية استخدام محرر قوالب WordPress ، والذي تم تضمينه في تحديثات WordPress منذ عام 2018 وهو موجود لتبقى. ستسمع أيضًا أنه يسمى محرر Gutenberg.

منذ إصدار WordPress 5.0 ، هناك خيار داخل محرر نصوص WordPress لـ "التحويل إلى الكتل" ، والذي تم العثور عليه بالنقر فوق النقاط الرأسية الثلاث ، على النحو التالي.

هل يجب عليك التحويل إلى كتل؟

إذا كنت تستخدم محرر نصوص WordPress تابع لجهة خارجية ، فقد تكون هناك مضاعفات. أنا لا أغطي هؤلاء في هذا المنشور. يرجى معرفة المزيد من محترف حول التحويل وفقي بعناية.

بالنسبة لأي شخص آخر - لا أتحمل أي مسؤولية - احتفظ دائمًا بنسخة احتياطية من موقع الويب / المدونة قبل تحويل الصفحة إلى كتل.

بالفعل تحول؟ تخطي هذا القسم.

لأولئك منكم الذين استخدموا المحرر الكلاسيكي ولديهم تخطيط بسيط للصفحة - يمكنني أن أوصي بكتل WordPress.

بمجرد أن تعتاد على محرر قوالب WordPress ، يصبح الأمر بديهيًا.

لن يؤدي النقر على تحويل إلى كتل إلى تحويل موقع الويب / المدونة بالكامل إلى كتل. فقط الصفحة أو المنشور الذي تعمل عليه.

ماذا يحدث عندما أقوم بالتحويل إلى كتل؟

يؤدي تحويل الصفحة إلى تحويل كل عنوان ، وفقرة ، ومقتطف من التعليمات البرمجية والصورة إلى كتلة فردية خاصة بها.

ستعتاد عليه قريبًا ، إذا كنت تقوم بالتحويل فقط.

تمكّنك الكتل من إضافة فقرات وأعمدة وجداول وصور وعناصر واجهة مستخدم وأحدث المنشورات والفئات بسهولة.

بالإضافة إلى الأدوات مثل أحدث المنشورات والتقويمات وأرشيفات المنشورات والفئات والرموز الاجتماعية وموجزات RSS.

تجعل كتل WordPress من السهل إضافة أي شيء قد يرغب فيه مالك موقع الويب تقريبًا. إنه مناسب حقًا.

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

اعرض موقع WordPress الإلكتروني في علامة تبويب جديدة

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

أسهل طريقة لفتح الواجهة الأمامية لموقع WordPress الخاص بك في علامة تبويب جديدة هي ؛

• في منطقة المسؤول - قم بالمرور فوق رمز المنزل ، أعلى يسار الشاشة.
• من القائمة المنسدلة ، انقر بزر الماوس الأيمن فوق "زيارة الموقع".
• انقر فوق "فتح الارتباط في علامة تبويب جديدة".

ملحوظة. قد يكون هناك تنوع في الكلمات حسب المتصفح الذي تستخدمه.

تم فتح علامتي تبويب في المتصفح الآن ، مما يعني أنه يمكنك التبديل بين الاثنين.

استمر في تحرير صفحة WordPress في علامة تبويب واحدة ، باستخدام منطقة الإدارة.

في الجانب الآخر ، ستعرض الواجهة الأمامية لموقع الويب الخاص بك. هذه هي طريقة التحقق من كل تغيير تقوم به.

أثناء إجراء التعديلات وحفظها ، يمكنك الانتقال إلى الواجهة الأمامية للموقع. اضغط على المفتاح F5 لتحديث الصفحة - وهذا يطالب المتصفح بإظهار الإصدار المحدث.

عنوان ووردبريس h1 والرابط الثابت

لنلق نظرة أولاً على العنوان والرابط الثابت.

العنوان h1 هو أول كتلة في أعلى الصفحة. هذه هي الكتلة الوحيدة غير المنقولة وهذا لسبب وجيه.

يجب أن تحتوي جميع الصفحات والمشاركات على عنوان h1 في البداية حتى تفهم محركات البحث والبشر ما هو موجود في الصفحة. إنه عامل تحسين محركات البحث.

استخدم الفأرة للنقر داخل كتلة العنوان. لتغيير عنوان ، قم بتمييز نص العنوان وابدأ في الكتابة. بسيط.

تم العثور على حقل الرابط الثابت ضمن إعدادات المستند على الجانب الأيمن ، انظر الصورة أدناه. تسمية WordPress لاسم الصفحة هي "URL Slug".

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

أضف كتلة WordPress

اضغط على أيقونة Plus + ، أعلى اليسار للبدء.

استكشف مكتبة الكتل - هناك العديد من الخيارات المتاحة هنا.

هناك طريقتان إضافيتان لإضافة كتلة إلى صفحة WordPress.

إذا كنت في تدفق إبداعي ، فقم بإضافة كتلة عن طريق الضغط على رجوع.

الطريقة الثالثة تتم عن طريق التمرير فوق كتلة - تظهر أيقونة Plus +.

في وقت كتابة هذا التقرير ، كان هذا أمرًا سخيفًا - قم بالمرور فوق الجزء السفلي الدقيق لمركز الكتلة حتى تظهر الأيقونة.

اضغط على الأيقونة واختر نمط كتلة. ستظهر الكتلة الجديدة أسفل رمز علامة الجمع.

فقرات ووردبريس باستخدام الكتل

غالبًا ما تكون كتل الفقرات هي العناصر الأكثر شيوعًا في صفحة أو منشور WordPress. أضف فقرة وابدأ في الكتابة.

اضغط على رجوع لإنشاء كتلة فقرة جديدة واستمر في الكتابة.

لجعل العمل يتدفق بشكل أسرع ، يمكن تحويل كتل الفقرات إلى أنماط أخرى.

باستخدام المؤشر في كتلة فقرة جديدة ، اكتب a / (شرطة مائلة للأمام). هذه الاختصارات لقائمة أنواع الحظر المحتملة.

بدلاً من ذلك ، قم بتحويل كتلة باستخدام شريط الأدوات. في الكتلة المحددة ، يظهر شريط الأدوات ، أعلى اليسار.

يوجد في شريط الأدوات الخاص بالفقرة خيارات لتغيير "نوع أو نمط الكتلة" أو تنسيق النص:

تحويل كتلة فقرة WordPress

استخدم زر "تغيير نوع أو نمط كتلة" لتحويل كتلة الفقرة. التحول مقصور على كتل من نفس النوع. أي لا يمكن تغيير الفقرات إلى جداول ، ولكن يمكن تغييرها إلى عناوين.

دعنا نغير فقرة إلى رأس ، على سبيل المثال.

يشير السهم الموجود في الصورة أدناه إلى الرمز الذي يمثل فقرة. هذه هي الطريقة التي تعرف بها أن الكتلة عبارة عن فقرة.

انقر فوق الأيقونة لتحويل الفقرة.

ضرب HEADING.

يتغير رمز الفقرة إلى H ويمكنك رؤية H2 بجانبه.

لا يمكن اختيار H1 - يجب استخدام H1 فقط لعنوان الصفحة.

الكتلة هي الآن كتلة عنوان.

حدد H3 أو H4 بالضغط على زر H2 بالاختيار من القائمة.

استخدم العناوين كتسلسل هرمي داخل الصفحات والمشاركات. استخدم H2 لتقسيم الصفحة إلى أقسام سهلة القراءة. استخدم H3 لتقسيم هؤلاء.

تنسيق الفقرات والعناوين

يعني تنسيق النص فقط إضافة نمط معين إليه.

في عنوان أو فقرة ، قم بتمييز النص الذي تريد تنسيقه.

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

لا يزال من الممكن استخدام اختصارات لوحة المفاتيح - تمييز النص واستخدام:

• التحكم- ب للجرأة
• التحكم- i للخط المائل.
• سوف تحكم- u تسطير النص.

مستخدمو Mac - استخدم مفتاح الأوامر بدلاً من مفتاح التحكم.

قم بزيارة اختصارات لوحة مفاتيح WordPress للحصول على قائمة مفيدة.

لاحظ وجود سهم لأسفل على شريط الأدوات ؛ قائمة منسدلة لـ "المزيد من عناصر التحكم في النص المنسق". تم العثور على نمطين آخرين هنا - يتوسطه خط ولون النص .

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

تم العثور أيضًا على "رمز مضمّن" و "صورة مضمنة" في هذه القائمة.

سيتم وضع أي "مضمنة" داخل سطر النص الذي تكتبه. مفيد لمقتطفات التعليمات البرمجية وربما الرموز ، لكن الصور الأكبر ستبدو غريبة في رأيي.

إعدادات الفقرة

حدد مقطع فقرة لعرض الخيارات على الجانب الأيمن من شاشة WordPress.

تغيير حجم النص الخاص بك هنا.

لطيف حقًا إذا كان لديك خط رئيسي تود إبرازه.

هناك أيضًا إمكانية تغيير لون الفقرات بأكملها. أود أن أحذر من الجنون أكثر من اللازم مع هذه الخيارات.

المزيد من خيارات التحويل للفقرات

خيارات التحويل الأخرى لكتلة الفقرة هي:

• قائمة،
• كتلة منسقة مسبقًا ،
• اقتباس،
• آية
• أو مجموعة.

القوائم

القوائم عبارة عن تسمية WordPress للنقاط النقطية - وهي مفيدة حقًا لمساعدة العناصر على التميز على صفحة الويب. هناك نوعان من القوائم المتاحة:

• القائمة المرتبة (OL) - مرتبة اختياريًا بالأرقام الرومانية أو الكسور العشرية أو الأحرف.
• قائمة غير مرتبة (UL) - نقاط تعداد نقطية.

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

لم نر الكتل "منسقة مسبقًا" أو "آية" في WordPress ، لذلك سأشرح قليلاً عن أنواع الكتل هذه.

كتلة منسقة مسبقًا في WordPress

تسمح الكتلة المنسقة مسبقًا لمستخدمي WordPress بكتابة النص تمامًا كما يرغبون ، مع الاحتفاظ بفواصل الأسطر والمسافات البادئة.

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

في كتلة فقرة فارغة ، اكتب / منسق مسبقًا ، ثم اضغط على Enter لإنشاء كتلة منسقة مسبقًا.

أو استخدم شريط الأدوات كما هو مذكور أعلاه.

بيت شعر

يقول WordPress أن كتلة الآية مثالية لإضافة الشعر إلى موقعك ، لذلك سميت بشكل مناسب.

يمكن للمستخدمين الأكثر تقدمًا إضافة CSS إلى كتل الآيات ، مما يجعل تصميم مجموعة الآيات أمرًا سهلاً.

 الورود حمراء 
زهرة البنفسج لونها أزرق.

الأزرار في محرر كتلة WordPress

يسمح محرر قوالب WordPress للمحرر بإنشاء أزرار مخصصة.

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

لإضافة زر ، استخدم رمز "إضافة كتلة" ، وحدد "زر".

ابدأ في كتابة نص الزر على الفور.

الآن ، هناك جزأين لـ "كتلة الزر" ، والتي يمكن أن تكون مربكة.

يوجد زر داخل كتلة خارجية. انقر فوق الزر ، ثم انقر خارج الزر مباشرةً ، في المساحة البيضاء لترى ما أعنيه.

حرك الزر أو اسحبه باستخدام الكتلة المحتوية. يمكن محاذاة الزر داخله.

انقر فوق الزر ويمكن تصميم ذلك - اللون والنص والحدود. هذا أيضًا هو المكان الذي ستربط فيه الزر.

منطقي؟

حدد الزر - تتوفر المزيد من خيارات التصميم على الجانب الأيمن من WordPress.

يمكن إضافة النمط إلى نص الزر ، تمامًا مثل الفقرة. كن حذرا ربط النص.

لقد اكتشفت أن WordPress يمنح القدرة على ربط نص الزر (عبر شريط أدوات الزر ، تمامًا مثل الفقرة) أو ربط الزر بالكامل عبر الخيارات الموجودة على اليمين. مربكة بعض الشيء.

الخيار الأفضل هنا هو ربط الزر بالكامل.

للقيام بذلك ، حدد الزر بالنقر فوقه ، راجع خيارات الحظر على الجانب الأيمن؟ قم بالتمرير على طول الطريق لأسفل إلى الجزء السفلي وقم ببث الرابط الخاص بك في حقل Link rel.

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

في المثال أعلاه ، قمت بإضافة رمز Font Awesome عن طريق نسخ كود HTML من Font Awesome:

 <i class="fas fa-arrow-right"></i>

لتضمينها على الزر الخاص بك ، حدد الزر ، واضغط على النقاط الرأسية الثلاث في نهاية شريط الأدوات واختر "تحرير بتنسيق HTML". الصق شفرة HTML قبل علامة الإغلاق </a>.

هذا الرمز متاح فقط إذا تم تثبيت Font Awesome.

مجموعات الكتل

تسمح كتلة المجموعة للمحرر بإضافة أكثر من كتلة بداخلها ، بحيث يمكن تحريك المجموعة أو تكرارها أو إعادة استخدامها ككل.

مفيد للتخطيطات. أو للاحتفاظ بالعناوين والفقرات معًا حتى لا تختلط الصفحة.

ومع ذلك ، فقد وجدت أن GROUPS محبطة قليلاً ، حيث يبدو أنها تختفي! أعتقد أن هذا خطأ في WordPress.

قم بتكرار قالب WordPress

بدلاً من ذلك ، عندما تكون في كتلة ، استخدم الاختصار CONTROL-SHIFT-D (COMMAND-SHIFT-D في جهاز Mac).

أعد استخدام قالب WordPress

ميزة أخرى رائعة حول قوالب WordPress هي خيار REUSABLE BLOCK.

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

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

تم العثور على الكتلة المحفوظة القابلة لإعادة الاستخدام داخل مكتبة الكتل ضمن علامة التبويب "قابلة لإعادة الاستخدام". ما عليك سوى العثور عليه وإضافته مثل أي كتلة أخرى. مفيد.

يمكن إدارة الكتل القابلة لإعادة الاستخدام ، لذلك ليس لديك الكثير من الكتل الفائضة في المجموعة.

تأكد من حفظ عملك. بعد ذلك ، في أي منشور أو صفحة ، انظر إلى الجزء العلوي من الشاشة ، سترى أزرار PREVIEW و UPDATE وأيقونة مسننة.

في نهاية هذا الشريط ستجد 3 نقاط عمودية ، انقر عليها لرؤية قائمة. يوجد في الجزء السفلي خيار "إدارة جميع الكتل القابلة لإعادة الاستخدام".

إدارة الكتل التي يمكن إعادة استخدامها بطريقة مماثلة للمنشورات - انقر على الأسماء لتعديلها.

لن يؤدي تحرير كتلة قابلة لإعادة الاستخدام إلى تغيير تصميم الكتل الموجودة بالفعل على الموقع.

كيفية سحب قالب WordPress

منذ التحديث إلى WordPress 5.5 ، لم يعد خيار السحب واضحًا.

تحتاج إلى تحديد الكتلة ، ثم النقر مع الاستمرار على الأسهم لأعلى لأسفل.

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

آمل أن يساعدك هذا في بدء تعديل WordPress باستخدام محرر قوالب WordPress. هناك الكثير لتغطيته ، لذا يرجى الاطلاع على مشاركاتي الأخرى على:

• كيفية إضافة الصور إلى ووردبريس.
• ربط صورة في WordPress.
• العناوين والفقرات في WordPress.
• الارتباط التشعبي في WordPress.
• التنسيق في WordPress.
• كيفية إضافة ملف PDF إلى WordPress (والارتباط به).

الكثير للتواصل مع! اسمحوا لي أن أعرف كيف تحصل على.