أضف صورة مميزة في مشاركات فردية

سيتم سحب الصورة المميزة لأرشيفك (Post Thumbnail) من الصورة المميزة بغض النظر عن كيفية إضافتها على شاشة تحرير المنشور.

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

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

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

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

في هذا المنشور ، سأزودك ببضعة أسطر من كود PHP يمكنك ببساطة لصقها في نهاية ملف السمات التابع لـ function.php.

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

طرح دان هذا السؤال مؤخرًا:

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

باستخدام Minimum Pro ، أود ببساطة عرض الصورة المميزة للمنشور في صفحة "منشور واحد". يفضل أن يكون فوق محتوى النص. لقد وجدت رمزًا في هذا المنتدى وقمت بوضعه في function.php. يتم عرض الصورة المميزة ، ولكن في نفس الوقت تمسح محتوى النص. لذا من الواضح أنني أفعل شيئًا خاطئًا.

ملاحظة: يرجى استخدام آخر مقتطف شفرة PHP في هذا المنشور إذا كنت تستخدم ترميز XHTML القديم وليس HTML 5 حيث تغيرت الروابط.

عرض الصورة المميزة بعد العنوان

يعرض هذا الرمز الصورة بعد عنوان المنشور الفردي.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

عرض الصورة المميزة قبل العنوان

يعرض هذا الرمز صورة لك قبل عنوان المنشور الفردي.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

عرض الصور المميزة على الصفحات الثابتة

إذا كنت تريد أيضًا أن يعمل هذا مع الصفحات الفردية الثابتة ، فما عليك سوى إضافة صفحة إلى الكود كما يلي:

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'page' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

عرض الصور المميزة على الصفحات الثابتة والمنشورات الفردية

إذا كنت تريد أيضًا أن يعمل هذا مع الصفحات الثابتة والمشاركات ، فما عليك سوى إضافة صفحة إلى الكود مثل هذا:

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular() ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

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

في الكود أعلاه ، يتعلق الأمر ببساطة بتغيير المعلمة الثالثة من 5 إلى 15.

تغيير حجم الصورة

إليك مثال على استخدام الحجم الكبير وفقًا لإعدادات الوسائط الخاصة بك.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

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

• ظفري
• متوسط
• كبير
• ممتلئ

يمكنك أيضًا استخدام أي أحجام مخصصة أضفتها في ملف وظائفك.

مثال:

مَلَفّ

 add_image_size( 'portfolio', 540, 340, TRUE );

استخدام XHTML Loop Hooks القديمة

إذا كنت لا تزال تستخدم XHTML ولم تتحول بعد إلى HTML 5 ، فستحتاج إلى استخدام Loop Hooks القديمة:

 add_action( 'genesis_before_post_title', 'single_post_featured_image' ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

إضافة مسافة بين العنوان والصورة

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

 .single .post-image { margin-bottom: 30px; }

استخدم هذا النموذج للصفحات:

 .page .post-image { margin-bottom: 30px; }

محاذاة الصورة المميزة (ما بعد الصورة) جهة اليمين

يمكنك أيضًا محاذاة صور منشورك إلى اليمين.

ما عليك سوى إضافة كود CSS هذا قبل استعلامات الوسائط بالقرب من نهاية ملف style.css الخاص بالسمات الفرعية:

 .single .post-image { float:right; margin:0 0 1em 1em; width: 285px; height: 285px; }

ستعمل الشفرة أعلاه على محاذاة الصورة التي تضيفها كصورة مميزة في جميع المنشورات الفردية على يمين المحتوى الخاص بك بحيث يتم التفاف نصها على النحو التالي:

يمكنك أيضًا إضافة فئة alignright إلى كود PHP بدلاً من استخدام CSS.

 'class' => 'alignright'

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

محاذاة الصورة المميزة (ما بعد الصورة) إلى اليسار

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

 .single .post-image { float:left; margin: 1em 1em 0 0; width: 200px; height: 200px; }

وإليك النتيجة:

يمكنك أيضًا إضافة فئة alignleft إلى كود PHP بدلاً من استخدام CSS.

 'class' => 'alignleft'

ما عليك سوى استبدال صورة ما بعد الصورة في كود PHP بـ alignleft وسوف يلتف النص حول صورتك على الجانب الأيسر من المحتوى الخاص بك.

إزالة ارتباط href من الصورة المميزة

سألني أحد الأعضاء عن كيفية إزالة الرابط من الكود ، فإليك ما يلي:

ببساطة استبدل هذا الجزء من الكود:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );

مع هذا:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); echo $img;

المنشورات ذات الصلة

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