كيفية إنشاء مربع نص في WordPress - الطريق السهل

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

كيف تنشئ مربعات النص الفاخرة هذه في WordPress؟

هل هي خدعة CSS؟ هل هو مكون إضافي؟ هل تحتاج إلى دراسة لغة برمجة جديدة؟



إنه في الواقع بسيط إلى حد ما ويمكن إجراؤه بواسطة مكون إضافي أو يدويًا.

كيفية إنشاء مربع نص في WordPress

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

إضافة مربع حقل إدخال نص

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

<form>
<input type="text" name="boxname">
</form>

في محرر القوالب ، أضف كتلة فقرة قياسية ، وانقر على النقاط الثلاث في أعلى اليمين ، وحدد 'تحرير باستخدام HTML'.

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

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

في المحرر الكلاسيكي ، انقر على خيار 'نص' للتعديل في HTML وإدراج نفس الرمز هناك.

تصميم مربعات إدخال النص باستخدام CSS

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

لا شيء زخرفي أو فاخر.

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

في لوحة WP-admin ، انتقل إلى قائمة المظهر وحدد 'تخصيص'.

من هناك ، يمكنك إضافة خيارات تصفيف متنوعة:

رمز مخصص CSS الخاص بك هو:

input[type="text"] {
  width: 100%;
  border: 2px solid Crimson;
  background: PeachPuff;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
  color: Crimson;
}

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

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

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

كيفية ترميز مربعات المحتوى في قالب style.css الخاص بموضوعات WP

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

النمط style.css هو ما يتحكم في جميع عناصر التصميم لكل موضوع.

يمكنك تحرير ورقة الأنماط لتضمين مربعات النص المخصصة الخاصة بك.

على سبيل المثال ، إذا أردت استخدام مربعات محتوى صفراء ، يمكنك إضافة قسم إلى style.css من أجل 'مربع المحتوى - أصفر'.

انتقل إلى cPanel ، مدير الملفات ، وانتقل إلى المجلد public_html ، (أو الدليل الفرعي لمجال إضافي) ، وابحث عن السمة التي تريد إضافة مربعات المحتوى المخصصة إليها.

انقر بزر الماوس الأيمن لتحرير ورقة style.css.

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

.content-box-yellow {
          background-color: #fef5c4;
          border-left: 8px solid #FADF98;

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

احفظ التغييرات وارجع إلى محرر منشورات WP. لإدراج المربع الآن ، استخدم علامة

لاستدعاء عنصر التصميم هذا.

<div class="content-box-yellow">The text you want to display inside a yellow box</div>

قم بإنشاء العديد من ألوان مربع المحتوى كما تريد. احصل على بعض الأخضر أو ​​الأحمر أو الأزرق أو الأرجواني أو الوردي النيون إذا أردت.

قم بإدراجها مرة واحدة في قالب style.css الخاص بك ، ثم يمكنك استدعائها بعلامة div في أي وقت تريد إدراج مربعات النص الملونة المخصصة.

كيفية إضافة مربع نص إلى الشريط الجانبي الخاص بك

لإضافة مربع نص إلى الشريط الجانبي ، تحتاج إلى إدراج عنصر واجهة مستخدم HTML مخصص والتفاف النص داخل حد.

علامة HTML المراد استخدامها هنا هي div ، وليست علامة span كما هي للمربعات المضمنة.

الكود المطلوب استخدامه هو

<div style="border:solid 3px black">

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

يمكن تغيير الحجم عن طريق تعديل الرقم قبل بكسل ، ويمكن أن يكون اللون أي لون تريده أيضًا.

استخدم اسم لون CSS أو الكود السداسي ، مثل #ffffff.

كيفية إضافة مربعات المحتوى في WordPress بدون تشفير

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

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

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

يمكن القيام بذلك بشكل مشابه لكيفية ترميز حدود HTML في أداة HTML المخصصة في WordPress.

اعتمادًا على عدد المرات التي تستخدم فيها مربعات المحتوى ، غالبًا ما يكون من الأسهل استخدام مكون إضافي يحتوي على الرموز بالفعل.

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

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

انتقل إلى المكونات الإضافية> إضافة جديد> البحث عن 'الرموز القصيرة'

الذي تبحث عنه هو 'WordPress Shortcodes Plugin - Shortcodes Ultimate'.

هناك بعض أنماط الصناديق التي يمكنك استخدامها.

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

الرموز القصيرة للمربعات هي 'ملاحظات' و 'صندوق مبسط' و 'صندوق'.

إليك مثال على ذلك:

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

سيظهر المحتوى الذي تكتبه في مربع النص على شاشتك مع عناصر تصميم CSS و HTML التي قمت بإنشائها.