كيفية تغيير لون النقاط في ووردبريس

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

في بعض أكبر مواقع الويب على الإنترنت ، تكون القوائم بارزة ولكنها نادرًا ما تكون الدوائر السوداء المستديرة العامة التي تظهر كمعيار عند إدراج قائمة نقطية في WordPress.

يجب إجراء عمليات التحرير لتصميم الرموز النقطية لجعلها تظهر بالطريقة التي تريدها. لا يجب أن يتم ترميزها مباشرة من WordPress أيضًا.

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

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

كيفية تغيير لون النقاط في ووردبريس

أسهل طريقة هي تحرير أداة تخصيص السمات باستخدام CSS. بدلاً من ذلك ، يمكن تغيير WP Style.css لتغيير ملف لون نقطة الرصاصة. يتم التحكم في قوائم التعداد النقطي بواسطة عناصر 'li'. يمكن أن يكون لها ألوان ، ويمكن تغيير الأنماط أو إزالتها لاستبدالها بالصور أو أحرف Unicode.

تغيير ألوان النقاط النقطية عن طريق تحرير ورقة أنماط النسق (Style.css)

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

كيفية تحديد موقع ملف style.css في WordPress

ملف style.css هو ورقة الأنماط لموضوع WordPress. إذا كنت تستخدم سمة إطار عمل مثل Genesis أو Divi ، فمن المحتمل أن يكون هناك سمة فرعية.

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

حدد اسم الفصل المراد تحريره

في كل قالب WordPress ، يختلف اسم الفئة المستخدمة للتحكم في نمط التعداد النقطي. تستخدم الغالبية سلسلة .entry-content ul li CSS ، بينما يسمي الآخرون عناصر القائمة بعلامات.

للعثور على اسم الفصل ، مرر مؤشر الماوس فوق قائمة تعداد نقطي ، وانقر بزر الماوس الأيمن وحدد فحص. ستفتح شاشة جديدة تعرض الترميز خلف المحتوى.

الاسم الذي يظهر في العارض هو العنصر الموجود في ورقة الأنماط لتحريره لتغيير لون التعداد النقطي أو التصميم العام.

ستحتاج إلى اسم عنصر div إما لتحديث ورقة الأنماط أو تحرير مُخصص WP. الاختلاف الوحيد في التحرير هو مكان وضع الشفرة.

قم بتحرير العناصر لتصميم نقاط WordPress الخاصة بك

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

يتحكم هذا في الخطوط وأنماط عناصر القائمة ولون النص وأنماط blockquote وحجم وخط ووزن العناوين.

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

السطر الدقيق للشفرة هو 'ul ، li' ، وعادة ما يتم فصله بفاصل سطر ، ثم تتم إضافة تصميم الرموز النقطية بعد الكود 'li'.

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

لتغيير لون النقاط ، أضف ما يلي إلى مخصص CSS

.entry-content ul li {
list-style: square;
color: #2E89FF;
}

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

تغيير لون التعداد النقطي بدون تغيير لون النص

سيؤدي الرمز أعلاه إلى تغيير لون التعداد النقطي والنص الموجود داخل قائمة التعداد النقطي.

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

انتقل إلى قائمة المظهر ، وحدد 'تخصيص' ، ثم استخدم الرمز أدناه:

ul {list-style: none}
li::before {content: "➣"; color: blue;
display: inline-block; width: 1em;
margin-left: -1em}

يستخدم CSS أعلاه حرف Unicode لاستبدال الرمز النقطي القياسي. ونظرًا لأنه يستخدم محتوى 'قبل' ، فإن الرمز النقطي فقط هو الذي يتغير لونه.

توم هانكس أنا القبطان الآن

يظل النص بنفس اللون والخط. فقط نمط الرصاصة يتغير.

لاستخدام النقطة القياسية فقط في لون مختلف ، بدلاً من حرف Unicode ، انسخ والصق رمز نقطي قياسي (الدائرة أو المربع أو أي شكل) بدلاً من حرف Unicode.

li::before {content: "•"; color: blue;

يشير التصميم النقطي لـ WordPress إلى تفضيلاتك

يمكن تغيير العديد من العناصر لجعل رصاصاتك بالنمط الذي تريده.

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

يمكن أن يكون نمط القائمة للرموز النقطية:

• دائرة
• ميدان
• قرص
• عدد عشري

يمكن تغيير القوائم العددية باستخدام

• رقم عشري بادئ - صفر (01. عنصر القائمة 1 ، 02. عنصر القائمة 2 ، إلخ.)
• أحرف رومانية أقل (على سبيل المثال ، عنصر القائمة 1 ، ثانيًا ، عنصر القائمة 2 ، إلخ.)
• أحرف رومانية علوية (أولاً بالنسبة للبند 1 من القائمة ، والثاني ، للبند 2 من القائمة ، وما إلى ذلك)
• لا شيء (المزيد حول هذا لاحقًا)

إليك كيف تبدو التغييرات.

مبادلة النقاط للصور

في الأنماط المذكورة أعلاه ، قد تندهش عندما ترى 'لا شيء' كخيار. لماذا تريد تضمين قائمة تعداد نقطي فقط لإخفاء الرصاص؟

ستكون كذلك على دراية كيفية عمل مسافة بادئة للنص في WordPress .

خيار عدم وجود نمط هو ما يجب ضبطه عندما تريد عرض صورة خلفية بدلاً من ذلك.

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

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

في لقطة الشاشة أدناه ، تم تغيير حجم الرمز إلى 20 × 20.

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

.entry-content ul li {
list-style-image:url(http:www.yoursite.com/wp-uploads/image-title.png);
}

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

تجاهل الصور باستخدام أحرف Unicode

أحرف Unicode مثل الرموز التعبيرية. هناك الآلاف من الشخصيات وليس كل وجوه مبتسمة.

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

آخر أخبار سارة وماتيو

للعثور عليهم ، ابحث في الويب عن 'أحرف Unicode'. هناك مواقع مخصصة للحفاظ على المكتبات الخاصة بهم. بعضها مثل الدلائل المتخصصة.

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

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

ابدأ بإدخال CSS لتغيير قائمة التعداد النقطي:

.entry-content ul li {
list-style-type: none;
}

ثم أضف قسمًا جديدًا لإضافة الحرف قبل عناصر القائمة.

.entry-content ul li:before {
content: "♥";
padding-right: 10px;
color: red;
}

يجب أن تبدو النتيجة كما يلي:

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

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

الأسئلة المتداولة المتعلقة بكيفية تغيير لون النقاط في WordPress

هل من الأفضل تحرير السمة أو استخدام أداة تخصيص WP لتصميم النقاط النقطية؟

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

هل يمكنك تغيير لون عناصر قائمة التعداد النقطي ولون نص مختلف؟

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