() translation by (you can also view the original English article)
في هذا البرنامج سوف ننشئ اضافة لتعيين صورة ووصف لكل موضوع لكي يظهر عند مشاركته على الفيسبوك. للقيام بذلك، سوف نستخدم برمجيتان جاهزتان بالورد بريس وهما Featured Image لمعاينة الصورة و "Post Excerpt" للوصف.
الخطوة 1 إنشاء الاضافة
قم بإنشاء ملف جديد باسم facebook-share-and-preview.php. افتح محرر النصوص المفضل لديك وقم بلصق الكود الاتي:
1 |
|
2 |
<?php
|
3 |
/*
|
4 |
Plugin Name: Facebook Share and Preview
|
5 |
Version: 1.0
|
6 |
Plugin URI: https://www.studio404.it/
|
7 |
Description: Adds a Share link to every post and set an image and a description for Facebook.
|
8 |
Author: Claudio Simeone
|
9 |
Author URI: http://www.studio404.it/
|
10 |
*/
|
11 |
?>
|
احفظ الملف في مجلد /wp-content/plugins/ وقم بتنشيطه من صفحة إدارة الإضافات.
الخطوة الثانية تفعيل Featured Images
من الإصدار 2.9 والورد بريس يسمح لك بتعيين صورة مميزة لكل موضوع، ولكن يجب أن يدعم الثيم هذه الوظيفة.. لذا، افتح صفحة "Add New Post" وتحقق ما إذا كان يتوفر صندوق "Featured Image":
إذا لم تشاهد صندوق "الصورة المميزة"، أضف السطر التالي لـ facebook-share-and-preview.php:
1 |
|
2 |
add_theme_support('post-thumbnails'); |
نحن سنعيين مقاس الصورة المخصصة. وفقا لمعايير الفيس بوك:
مقاس الصورة المصغرة يجب أن يكون على الأقل 50 بكسل للعرض والطول، ولا يمكن أن يتجاوز 130 × 110 بكسل.
صورة بمقاس 90 × 90 بكسل ستؤدي الغرض.
1 |
|
2 |
add_image_size('fb-preview', 90, 90, true); |
الآن الووردبريس ستقوم تلقائياً بإنشاء صورة مصغرة لكل موضوع لمشاركتها على الفيسبوك.
الخطوة 3 الحصول على الصورة المميزة والوصف
سنحتاج لبرمجيتان للحصول على الصورة المميزة والوصف:
1 |
|
2 |
// Get featured image
|
3 |
function ST4_get_FB_image($post_ID) { |
4 |
$post_thumbnail_id = get_post_thumbnail_id( $post_ID ); |
5 |
if ($post_thumbnail_id) { |
6 |
$post_thumbnail_img = wp_get_attachment_image_src( $post_thumbnail_id, 'fb-preview'); |
7 |
return $post_thumbnail_img[0]; |
8 |
}
|
9 |
}
|
10 |
|
11 |
// Get post excerpt
|
12 |
function ST4_get_FB_description($post) { |
13 |
if ($post->post_excerpt) { |
14 |
return $post->post_excerpt; |
15 |
}
|
16 |
else { |
17 |
// Post excerpt is not set, so we take first 55 words from post content
|
18 |
$excerpt_length = 55; |
19 |
// Clean post content
|
20 |
$text = str_replace("\r\n"," ", strip_tags(strip_shortcodes($post->post_content))); |
21 |
$words = explode(' ', $text, $excerpt_length + 1); |
22 |
if (count($words) > $excerpt_length) { |
23 |
array_pop($words); |
24 |
$excerpt = implode(' ', $words); |
25 |
return $excerpt; |
26 |
}
|
27 |
}
|
28 |
}
|
الخطوة 4 إضافة Metatags الفيسبوك لصفحة الموضوع الواحد
والآن سنكتب وظيفة للحصول على الصورة المصغرة ووالوصف ثم سنقوم باضافتهم لوسم <head> لصفحة الموضوع الواحد.
إذا لم يتم تعيين الصورة المميزة والوصف، لن يتم عرض العلامات (tags).
1 |
|
2 |
function ST4FB_header() { |
3 |
global $post; |
4 |
$post_description = ST4_get_FB_description($post); |
5 |
$post_featured_image = ST4_get_FB_image($post->ID); |
6 |
if ( (is_single()) AND ($post_featured_image) AND ($post_description) ) { |
7 |
?>
|
8 |
<meta name="title" content="<?php echo $post->post_title; ?>" /> |
9 |
<meta name="description" content="<?php echo $post_description; ?>" /> |
10 |
<link rel="image_src" href="<?php echo $post_featured_image; ?>" /> |
11 |
<?php
|
12 |
}
|
13 |
}
|
لكتابة الميتاتاج في وسم <head> لمدونتنا، سنستخدم وظيفة wp_head
1 |
|
2 |
add_action('wp_head', 'ST4FB_header'); |
استكشاف اخطاءالقالب وإصلاحها
تأكد من أنه يوجد في ملف header.php:
1 |
|
2 |
<?php wp_head(); ?> |
وسم </head> إذا لم يوجد قم بإضافته.
الخطوة 4 اضافة رابط المشاركة لصفحة الموضوع
في مجلد الثيم، افتح ملف content-single.php و قم بإضافة هذا حيثما تريد أن يظهر الرابط:
1 |
|
2 |
<a href="https://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo urlencode($post->post_title); ?>">Share on Facebook</a> |
على سبيل المثال، إذا كنت ترغب في إضافة رابط بعد محتوى الموضوع:
1 |
|
2 |
<div class="entry-content"> |
3 |
<?php the_content(); ?> |
4 |
<p><a href="https://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo urlencode($post->post_title); ?>">Share on Facebook</a></p> |
5 |
</div><!-- .entry-content --> |
قالب استكشاف الأخطاء وإصلاحها
في هذا الدرس التعليمي نحن نستخدم القالب الافتراضي : "Twenty Eleven". حيث ان هيكل كل ثيم يختلف من واحد لآخر، لذلك عليك معرفة من هو الملف المسئول عن عرض الموضوع الواحد في ملفات الثيم.
يمكنك العثور على صفحتان مفيدتان في WordPress Codex: التسلسل الهرمي للقالب والحلقة التكرارية. إذا كنت لا تزال تواجه صعوبات في العثور على الملف الصحيح، يمكنك الاتصال بمبرمج الثيم.
النتيجة النهائية
الان يمكنك يمكنك كتابة موضوع مع اضافة صورة ووصف
هذا هو رابط الموضوع المنشور على الفيس بوك:
و بمجرد النقر فوق مشاركة الرابط على الفيس بوك، سيكون هذا هو اطار معاينة الفيس بوك:
الآن لديك بعض المعرفة عن كيفية عرض المواضيع على الفيس بوك عند مشاركتها مع القارئ الخاص بك. اسمحوا لنا أن نعرف في التعليقات إذا كان هذا الدرس مفيد.
