كيفية استخدام خطوط الأيقونة في محرر كتابة WordPress (بدون كود)

نشرت: 2023-04-05


هل تريد استخدام خطوط الرموز في محرر منشورات WordPress؟

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

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

Using icon fonts in the WordPress editor

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

النظام 1. تضمين خطوط Icon في محرر مقالات WordPress باستخدام أيقونات محتوى نصي ثري من JVM

يُنصح باستخدام هذا النظام على أي مجموعة متنوعة من مواقع WordPress. إنه سهل الاستخدام ويعمل بسلاسة مع محرر الكتلة.

في البداية ، تريد تثبيت وتفعيل المكون الإضافي JVM Wealthy Text Icons. للحصول على تفاصيل إضافية ، راجع دليلنا التدريجي حول كيفية إضافة مكون WordPress الإضافي.

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

Icon font button in the block toolbar

سيؤدي النقر فوقه إلى إظهار نافذة منبثقة للأيقونات للاختيار من بينها. إنه يعمل عن طريق استخدام خطوط أيقونات Font Amazing الشائعة افتراضيًا.

يمكنك استخدام البحث لتظهر لرمز أو فقط قم بالتمرير لأسفل لتحديد موقع الرمز الذي تريده ، ثم انقر لدمجها.

Choose icons to insert

1 ميزة لاستخدام خطوط الرموز هي أنه يمكنك استخدام CSS لتصميمها.

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

Style icon fonts using block editor tools

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

فيما يلي توضيح لاستخدام خطوط الرموز وحلول الكتلة لتصميم 3 أعمدة.

Icon fonts in columns

مثال آخر مفيد لاستخدام خطوط الرموز هو الأزرار.

هذه المرة نستخدم خطوط الرموز المضمنة جنبًا إلى جنب مع بعض النصوص للزرّين.

Using icon fonts in buttons and lists

لا تتردد تمامًا في استخدام معدات محرر الكتل مثل محاذاة المحتوى النصي والظلال والتباعد وغير ذلك الكثير لتحقيق أقصى استفادة من خطوط الرموز.

الإستراتيجية 2. قم بتضمين خطوط Icon في WordPress ، قم بإرسال محرر باستخدام Font Awesome

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

في البداية ، يجب عليك تثبيت وتفعيل المكون الإضافي Font Amazing. لمزيد من الجوانب ، راجع معلوماتنا خطوة بخطوة حول كيفية إعداد مكون WordPress الإضافي.

عند التنشيط ، يمكنك تحرير منشور أو صفحة في WordPress واستخدام التمسك بالرمز المختصر لتضمين رمز الخط.

Adding icon fonts using shortcode

معلمة الاسم المدرجة هنا هي تحديد الخط المستخدم بواسطة Font Brilliant. يمكنك اكتشاف قائمة التحقق الكاملة على صفحة ويب ورقة الغش الخاصة بـ Font Brilliant.

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

هذا ما بدا على موقع الويب الخاص بنا.

Font icon preview

يمكنك استخدام الرمز القصير داخل فقرة ومضمنة مع محتوى نصي آخر. يمكنك أيضًا دمجها في حيازتها باستخدام كتلة "الرمز القصير".

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

يمكنك أيضًا زيادة الرمز القصير داخل الأعمدة لإنشاء صف خيارات.

Shortcode in columns

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

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

Icon fonts preview using Font Awesome

سيتعين عليك في جميع الاحتمالات معاينة عملك في علامة تبويب متصفح جديدة عدة مرات لترى كيف سيظهر للمستهلكين.

العملية 3. العمل مع خطوط الأيقونات مع منشئي صفحات الويب في WordPress

هذه العملية ممتازة إذا كنت تقوم بإنشاء موقع هبوط أو تطوير موقع الإنترنت الخاص بك باستخدام أداة إنشاء مواقع WordPress مثل SeedProd.

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

SeedProd WordPress Website Builder

أولاً ، تريد إعداد وتفعيل المكوّن الإضافي SeedProd. لمزيد من التفاصيل ، راجع البرنامج التعليمي خطوة بخطوة حول كيفية تثبيت مكون WordPress الإضافي.

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

SeedProd license key

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

انتقل بشكل أساسي إلى SeedProd »صفحات الويب المقصودة وانقر فوق الزر" إضافة صفحة مقصودة جديدة ".

Add new landing page

بعد ذلك ، سيتم استجوابك لاتخاذ قرار بشأن نموذج لموقع الهبوط الخاص بك.

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

Choose landing page template

في هذا البرنامج التعليمي ، سنستخدم نموذجًا مصممًا مسبقًا. ما عليك سوى النقر فوق قالب لاختياره والمتابعة.

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

Provide page title and URL

بعد الدخول إليها مباشرة ، انقر فوق الزر "حفظ وبدء تحسين الصفحة" للمتابعة.

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

SeedProd page builder interface

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

من أجل هذا البرنامج التعليمي ، من المحتمل أن ندمج كتلة Icon.

Add icon block

بعد دمج الكتلة ، يمكنك النقر فوقها لتعديل منازلها.

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

Icon block settings

هناك طريقة إضافية لاستخدام الرموز في SeedProd وهي إضافة كتلة "Icon Box".

الاختلاف بين هذا وكتلة "Icon" التي استخدمناها سابقًا هو أن "Icon Box" تتيح لك زيادة المحتوى النصي جنبًا إلى جنب مع الرمز الذي حددته.

هذه إحدى أكثر الوسائل شيوعًا لاستخدام الرموز عند عرض خيارات البضائع والشركات والسلع الأخرى.

Icon box block

يمكنك وضع مربع الرمز الخاص بك داخل الأعمدة واختيار الظلال وتغيير حجم الرمز حسب رغبتك.

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

Icon box inside columns

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

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

Save and publish your landing page

يمكنك أيضًا النقر فوق "حفظ كقالب" حتى تتمكن من إعادة استخدام هذه البنية مع SeedProd في أجزاء أخرى من موقع الإنترنت الخاص بك.

إليك كيفية ظهور خطوط الرموز على موقع الاختبار الخاص بنا.

Icon fonts preview

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

إذا كنت تفضل هذه الكتابة ، فتأكد من الاشتراك في قناتنا على YouTube لدروس الفيديو عبر الإنترنت في WordPress. يمكنك أيضًا اكتشافنا على Twitter و Facebook.