كيفية إضافة سمة عنوان إلى قائمة التنقل في ووردبريس. كيف وأين لملء البديل في وورد؟ صورة جاهزة مع "سمة العنوان"
منذ وقت ليس ببعيد، طرح أحد قرائنا سؤالاً: هل من الممكن إضافة سمة العنوان بطريقة أو بأخرى إلى قائمة ووردبريس؟ يتم عرض هذه السمة معلومات إضافيةحول الرابط في شكل تلميح نصي يظهر عند تحريك المؤشر. سنوضح لك في هذه المقالة كيفية إضافة سمة عنوان إلى قائمة WordPress.
لماذا هناك حاجة إلى العنوان في القائمة؟
العنوان هو سمة HTML يمكن تعيينها لأي عنصر. ولكن في أغلب الأحيان يتم استخدامه في الروابط والصور.
تعرض هذه السمة معلومات إضافية حول الرابط أو الصورة:
تعرض المتصفحات عادةً العنوان عند تمرير الماوس. وهذا يسمح للمستخدمين بمعرفة أين يؤدي الرابط.
يعتبر بعض مُحسني محركات البحث أن سمة عنوان HTML عديمة الفائدة، بينما يعتقد البعض الآخر أن هذه السمة مفيدة للغاية لتحسين محركات البحث لأنها تتيح لك تقديم المزيد من المحتوى.
قام مطورو WordPress بإزالة سمة العنوان من نافذة إضافة الرابط في الإصدار 4.2. بينما نحن في هذا الموضوع، دعونا نتعلم كيفية إضافة عنوان إلى قائمة WordPress.
إضافة سمة عنوان إلى عناصر قائمة التنقل في WordPress
اذهب إلى المظهر=> القوائم ( المظهر=>القائمة) وانتقل إلى علامة التبويب "خيارات الشاشة" ( إعدادات الشاشة)، الموجود في الزاوية اليمنى العليا:
سيتم فتح قائمة ستحتاج فيها إلى التحقق من " سمة العنوان».
ثم قم بتمرير الصفحة وانقر فوق أي عنصر قائمة لفتحه. سترى فيه حقلاً لسمة العنوان:
ستتمكن الآن من إضافة أي نص إلى سمة عنوان WordPress لجميع العناصر قائمة الإبحار. لا تنس النقر على زر "حفظ" حتى لا تفقد تغييراتك.
مع باستخدام مسجيمكنك إكمال هذه السمة عن طريق إضافة تأثيرات مختلفةعند تحريك المؤشر. نأمل ذلك هذا المقالساعدك على فهم إعداد سمة العنوان في قائمة WordPress.
ترجمة المقال " كيف أضف عنواناالسمة في قوائم التنقل في WordPress» تم إعداده من قبل فريق المشروع الصديق
جيد سيئ
مطلوب سمة بديلةيحدد نصًا بديلاً لعرضه في الحالات التي لا يمكن فيها عرض الصورة بسبب بطء الاتصال...
الأيقونات جزء مهم من أي تصميم. العديد من الرموز معترف بها عالميًا. على سبيل المثال، تعيين دورات المياه في محطات المطار. حتى بدون معرفة اللغة..
يستقبل علامة لصورة المرفق المحدد (مرفق بمنشور الملف).
إذا تعذر العثور على المرفق، فسيتم إرجاع سلسلة فارغة.
إذا كان المرفق عبارة عن صورة، فسيتم إرجاع رمز يتوافق مع الحجم المحدد لها (راجع المعلمة $size).
بالنسبة للملفات المرفقة من نوع آخر غير الصور (.zip، .xls، .flv)، سيتم إرجاع أيقونة مقابلة لهذا النوع (يكتشفها WordPress تلقائيًا). بشكل افتراضي، لا يتم عرض هذا الرمز؛ لكي يتم عرضه، تحتاج إلى تعيين المعلمة الثالثة ($icon) على true.
خطافات من وظيفة
عائدات
خط. كود HTML للصورة في بطاقة شعار.
الاستخدام
$img = wp_get_attachment_image($attachment_id, $size, $icon, $attr); $attachment_id (الرقم المطلوب)معرف المرفق الذي تريد الحصول على صورته. حجم $ (سلسلة / صفيف)حجم الصورة. يمكن تحديدها في النموذج:
- سلاسل مصغرة، متوسطة، كبيرة، كاملة أو اسم الحجم المتاح
- على شكل مصفوفة من عنصرين تحدد أبعاد جوانب الصورة المعروضة: array(32,32) .
لا يؤدي تحديد الأبعاد من خلال مصفوفة إلى تقليل الصورة فعليًا، بل يتم تقليلها بشكل مرئي فقط من الصورة المصغرة الجاهزة الأكثر ملاءمة (التحميلات).
لا يؤثر تحديد الأحجام على حجم الرموز المعروضة للملفات، حيث يتم عرضها دائمًا بالحجم الأصلي (32x32).
بدلاً من استخدام مصفوفة، يكون من المنطقي في بعض الأحيان تسجيل حجم صورة جديد (add_image_size()) واستخدامه مع الأحجام المحددة بالفعل (صورة مصغرة أو متوسطة أو كبيرة أو كاملة). يعد هذا النهج أكثر فعالية، حيث ليست هناك حاجة للتحقق باستمرار من الأحجام المتاحة التي تناسبها بشكل أفضل.
الافتراضي: "صورة مصغرة"
رمز $ (منطقي)ما إذا كان سيتم استخدام أيقونات الوسائط لتمثيل المرفقات. افتراضيًا، بالنسبة للمرفقات من نوع الملف (وليس الصور)، لن يتم عرض الرمز؛ إذا كنت تريد عرض رموز لهذه الأنواع من المرفقات، فاضبط هذه المعلمة على true.
الافتراضي: خطأ$attr (مجموعة مصفوفة)
أي سمات للعلامة في المصفوفة. على سبيل المثال:
صفيف("class" => "foo bar"، "title" => "عنوان الصورة"،)
أمثلة
#1. سنعرض صورة جاهزة لـ HTML
دعونا نعرض الصورة متوسط حجم ملف الصورة المرفقة 651:
سيتم إخراج شيء مثل HTML هذا:
سيتم ملء النص البديل فقط إذا تم تحديده للإرفاق في حقل خاص (نص بديل). لا يتضمن البديل نصًا من عنوان الصورة أو وصفها أو تعليقها...
#2. مثال بحجم مخصص
سنعرض صورة بالحجم المحدد 20 × 20 بكسل للمرفقات من نوع "صورة" والأيقونة المقابلة لأنواع المرفقات الأخرى (المعلمة الثالثة):
معرف، مجموعة (20،20)، صحيح)؛ ?>
$post->ID - النقل الديناميكي للمعرف داخل الحلقة. يمكنك إنشاء مثل هذه الحلقة باستخدام الدالة get_posts() (get_posts("post_type=attachment")).
wp الحصول على رمز الصورة المرفقة: wp-includes/media.php الإصدار 5.1.1
$src, "class" => "attachment-$size_class size-$size_class", "alt" => Trim(strip_tags(get_post_meta($attachment_id, "_wp_attachment_image_alt", true))),); $attr = wp_parse_args($attr, $default_attr); // أنشئ "srcset" و"الأحجام" إذا لم تكن موجودة بالفعل. if (empty($attr["srcset"])) ( $image_meta = wp_get_attachment_metadata($attachment_id); if (is_array($image_meta)) ( $size_array = array(absint($width), absint($height)); $srcset = wp_calculate_image_srcset($size_array, $src, $image_meta, $attachment_id $sizes = wp_calculate_image_sizes($size_array, $src, $image_meta, $attachment_id); attr["sizes"]))) ( $attr["srcset"] = $srcset; if (empty($attr["sizes"])) ( $attr["sizes"] = $sizes; ) ) ) ) /** * يقوم بتصفية قائمة سمات الصورة المرفقة. * * @since 2.8.0 * * @param array $attr سمات لترميز الصورة. * @param WP_Post $attachment منشور مرفق الصورة. * @param string|array $size الحجم المطلوب. حجم الصورة أو مجموعة قيم العرض والارتفاع * (بهذا الترتيب). الافتراضي "الصورة المصغرة". */ $attr = Apply_filters("wp_get_attachment_image_attributes", $attr, $attachment, $size); $attr = array_map("esc_attr", $attr); $html = رتريم("يحتوي معظم محتوى الويب على صور، لكن القليل من مالكي مواقع الويب يقومون بتحسين الصور للحصول على تصنيفات بحث أفضل. يوفر WordPress القدرة على إضافة نص بديل وعنوان الصورة إلى العلامات المناسبة. دعونا نلقي نظرة على الفرق بين سمات alt وtitle وكيفية استخدامها للعمل مع الصور الموجودة على الموقع.
ما هي العلامة البديلة للصور - وصف الصور
Alt، أو النص البديل، هو سمة تضاف إلى علامة إدراج الصورة في تعليمات HTML البرمجية. يظهر هذا النص داخل حاوية الصورة عندما لا يمكن عرضه على الصفحة لسبب ما. وهذا يساعد محركات البحث على فهم ما يظهره الرسم.
تُستخدم السمة alt أيضًا لتحسين إمكانية الوصول إلى موقع الويب للأشخاص ضعاف البصر أو أولئك الذين يستخدمون برامج قراءة الشاشة. سيقوم برنامج القارئ بقراءة المقالة النصية، وعندما يتعلق الأمر بالصورة، فسوف يقرأ النص الموجود في السمة alt. سيسمح هذا للمستخدمين بمعرفة ما هو موجود في الصورة حتى لو لم يتمكنوا من رؤيته.
استضافة موقع افتراضي لنظام CMS الشهير:
توصيات لملء هذا الوسم، ماذا تكتب في ووردبريس
يتيح لك WordPress إضافة سمة بديلة إلى الصور عند تحميلها باستخدام أداة تحميل الوسائط المدمجة. عند إنشاء صفحة أو منشور، يتوفر زر "إضافة ملف وسائط" على شريط الأدوات. عند النقر فوقه، يتم فتح نافذة المكتبة المضمنة، حيث تحتاج إلى تحميل الصورة المطلوبة أو سحبها ببساطة باستخدام الماوس.
عندما تقوم بتحميل صورة باستخدام أداة تحميل محتوى WordPress المدمجة، هناك العديد من الحقول المتاحة على الجانب الأيمن من النافذة لتتمكن من ملء سمات الصورة. لا ينبغي الخلط بين حقل العنوان وسمة العنوان، والتي يتم استخدامها داخل علامة الصورة. يتم استخدام العنوان المضاف أثناء التحميل فقط بواسطة مكتبة وسائط WordPress لعرض قائمة بملفات الوسائط.
قم بتعيين سمة alt في الحقل المناسب - وتتكون عادةً من 2-3 كلمات ويجب أن تصف مباشرة ما يظهر في الصورة. إذا كنت ترغب في ذلك، في نفس نافذة التحميل، يمكنك ملء الحقول الخاصة بالتوقيع ووصف الصورة.
ما هي سمة التسمية التوضيحية للعنوان للصور في WordPress
العنوان هو سمة أخرى يمكن إضافتها إلى علامة الصورة في كود HTML. يتم استخدامه لعنوان عنصر رسومي ويشير إلى اسمه. يظهر العنوان في تلميح الأدوات عندما يقوم المستخدم بالتمرير فوق الصورة. لن يتم عرض النص الذي تم إدخاله داخل العنوان للمستخدم إذا لم يتم عرض الصورة على الصفحة.
يجب إعطاء العنوان معنىً بناءً على المعلومات المقدمة في الصورة. وفي الوقت نفسه، يجب أن يكون هذا النص مختلفًا عما هو موجود في السمة alt. يمكن كتابة عنوان العنوان باللغة الروسية أو غالبًا ما تتم إضافة الكلمات الرئيسية إليه لتحسين محركات البحث.
تتم إضافة سمة العنوان إلى الصورة في WordPress بعد إدراجها في النص. إذا كنت تستخدم محررًا مرئيًا لتصميم الصفحة، فانقر على الصورة. في شريط الأدوات الإضافي الذي يظهر، انقر فوق زر التعديل الذي يحمل رمز القلم الرصاص.
نتيجة لذلك، سيتم فتح نافذة منبثقة لتكوين معلمات الصورة، حيث تحتاج إلى فتح قسم "الإعدادات المتقدمة". سيظهر حقل لإضافة سمة عنوان، حيث تحتاج إلى إدخال اسم الصورة. في نفس النافذة، يمكنك تكوين سمة البديل في حالة نسيان إدخالها عند تحميل الصورة. اضبط كلا الحقلين وانقر فوق الزر "تحديث".
بالنسبة لأولئك المستخدمين الذين يعرفون كيفية تحرير كود HTML، ما عليك سوى التبديل من محرر مرئي إلى محرر نص وإضافة سمات العنوان والبديل إلى علامة الصورة المقابلة.
لتحسين موقعك، يوصى باستخدام سمتي alt وtitle للصور. الفائدة الواضحة لهذه الخطوة هي أنها تساعد محركات البحث في العثور على الصور الموجودة على موقعك وعرضها في نتائج بحث الصور.
وفي الوقت نفسه، يتلقى الموقع حركة مرور إضافية من محركات البحث. هناك عامل مهم آخر وهو أن هذه السمات تعمل على تحسين إمكانية الوصول إلى موقعك للأشخاص ذوي الاحتياجات الخاصة.
بدءًا من الإصدار 3.5 من WordPress، تمت إزالة وظيفة إضافة سمة العنوان تلقائيًا من المحرر، وهو أمر غير مريح للغاية في رأيي. لا، تظل هذه الوظيفة في المحرر، ولكن للوصول إليها وإضافة وصف للصورة، يتعين عليك إجراء بعض المعالجات الإضافية، ثم ملء الحقل المطلوب يدويًا.
سنلقي نظرة في هذه المقالة على الطريقة القياسية لإضافة سمة "العنوان" إلى الصور وأخرى تلقائية بديلة.
دعونا نرى كيفية إضافة سمة عنوان في محرر WordPress الافتراضي
كما ذكرت سابقًا، بالنسبة لي شخصيًا، فإن إضافة أوصاف للصور بالطريقة التي يقترحها مطورو WordPress أمر غير مريح للغاية. علاوة على ذلك، لا أستخدم محرر WordPress المرئي على الإطلاق، ناهيك عن إضافة الصور من خلاله.
لإضافة سمة عنوان إلى صورة في محرر WordPress الافتراضي، عليك القيام ببعض الأشياء:
1. انتقل إلى علامة التبويب "بصريًا"؛
2. أضف صورة بالطريقة القياسية، انقر عليها؛
3. انقر على زر التعديل في علامة التبويب التي تظهر؛
4. ابحث عن حقل "سمة العنوان" واملأه في "خيارات الصورة" (انظر لقطات الشاشة).
وبعد ذلك فقط ستظهر التسمية التوضيحية المرغوبة والتي طالت معاناتها للصورة.
في علامة التبويب "خيارات الصورة"، يمكنك أيضًا تعيين فصلك الخاص للصورة والسمات الأخرى. في رأيي، من الأسرع كتابة سمة عنوان وإضافة فئة إلى الصورة يدويًا باستخدام علامة تبويب النص في محرر WordPress.
خيار تلقائي لإضافة عنوان إلى محرر WordPress
بالطبع يمكنك إضافة وصف للصورة على أية حال، أو يمكنك إضافة دالة صغيرة مرة واحدة إلى ملف jobs.php، أو إلى ملف بديل لملف الوظائف، مقال بديل ملف jobs.php WordPress، مع الوظائف الإضافية (بالنسبة لأولئك الذين لديهم الكثير من التغييرات الوظيفية، أنصحهم بعدم اختفاء التغييرات عند تحديث السمة).
وبدلاً من ذلك، قم بتثبيت البرنامج المساعد الخاص "استعادة عنوان الصورة". البرنامج المساعد لا يستهلك الكثير من الموارد وله وظيفتان فقط.
هناك خيار آخر يتمثل في إضافة مقتطف من التعليمات البرمجية مباشرة إلى ملف jobs.php.
انظر إلى لقطات الشاشة. الآن سيكون حقل "العنوان" هو التسمية التوضيحية لعنوان الصورة.
إضافة سمة عنوان إلى محرر الصور في WordPress
للقيام بذلك، افتح ملف jobs.php والصق هذا الجزء من التعليمات البرمجية في النهاية:
الدالة lcb_restore_image_title($html, $id) ( $attachment = get_post($id); if (strpos($html, "title=")) ( return $html; ) else ( $mytitle = esc_attr($) مرفق->post_title);"!}
إذا كنت تستخدم معرضًا، فيمكنك إضافة سمة عنوان إلى الصور المصغرة من المعرض. للقيام بذلك، ما عليك سوى إضافة مقتطف تعليمات برمجية آخر إلى مقتطف التعليمات البرمجية أعلاه لمعرض WordPress.
إضافة سمة عنوان إلى محرر معرض WordPress
الوظيفة lcb_restore_title_to_gallery($content, $id) ( $thumb_title = get_the_title($id); return str_replace("يعرض عنوان المنشور المُعد للاستخدام في سمات علامة html.
يجب استخدام الوظيفة داخل حلقة WordPress.
الوظيفة مماثلة لوظيفة the_title()، والفرق الوحيد هو أن هذه الوظيفة "تنظف" عنوان علامات HTML وتغير كيانات HTML (< , >, " , ") إلى مكافئاتها في HTML. على سبيل المثال، علامة< будет заменен на < . К заголовку применяются функции-фильтры: esc_attr() и strip_tags()
يمكن لهذه الوظيفة أيضًا قبول المعلمات في شكل سلسلة: "before=
&بعد=
"✈ 1 مرة = 0.005307 ثانية = بطيء جدا| 50000 مرة = 2.55 ثانية = سريع| PHP 7.1.2، وب 4.7.3
لا توجد خطافات.
عائدات
فارغة/سلسلة. فارغة عند طباعة النتيجة على الشاشة (صدى = صحيح). الرأس عند إرجاع النتيجة (صدى = صحيح).
الاستخدام
وسيطات $ (صفيف/سلسلة)المعلمات كمصفوفة أو سلسلة. يمكنك تمرير المعلمات التالية:
- بريد (رقم/كائن)
معرف أو كائن الإدخال.
الافتراضي: الإدخال الحالي
قبل (خط)
سيتم وضع النص/رمز HTML قبل العنوان.
تقصير: ""
بعد (خط)
سيتم وضع رمز النص/HTML بعد العنوان.
تقصير: ""
صدى صوت (منطقي)
الطباعة على الشاشة (صحيح) أو العودة لمزيد من المعالجة (خطأ).
الافتراضي: صحيح
تقصير: ""
أمثلة
#1. مثال على استخدام وظيفة في سمة العنوان للعلامة .
لأن هذه السمة غير مسموح بها باستخدام أتش تي أم ألعلامات الاقتباس وأشياء أخرى، فلا يمكننا استخدام وظيفة the_title() هناك. بدلاً من ذلك نستخدم the_title_attribute() :
" عنوان = ""الرابط الثابت إلى: "، "بعد" => "")); ?>">