דף הבית » טריקים וטיפים

עיצוב הפוסטים המוטמעים שלכם

12 בפברואר 2016 | מאת רמי | אין תגובות | תגיות: ,

בוורדפרס 4.4 התווספה האפשרות להטמיע את הפוסטים של האתר שלכם באתרים אחרים באמצעות פרוטוקול oEmbed. בדומה לציוצי טוויטר שמציגים בצורה ויזואלית את הציוץ  באתר שלכם כך ניתן להציג את הפוסטים שלכם באתרים חיצוניים בהזנת הכתובת בלבד. הבעיה שהפוסטים המוטמעים באים עם עיצוב אחיד. היום נלמד איך לקסטם את העיצוב הזה כדי לבדל את האת שלכם ממיליוני אתרים אחרים בעולם.

דוגמא לפוסט מוטמע

לצורך המחשה, אני הולך להטמיע פוסט מתוך האתר שלי שמדבר על וורדפרס 4.4, מדובר בפוסט רגיל שנמצא בכתובת הבאה: http://www.wp-tricks.co.il/2015/12/וורדפרס-4-4/

אתרי וורדפרס שיטמעו את הפוסט הזה בתוכן, או כל מערכת אחרת שתומכת בפרוטוקול oEmbed, יראו את הפוסט המוטמע באופן הבא:

צילום מסך של הפוסט המוטמע

צילום מסך של הפוסט המוטמע

הערה: אני בכוונה מציג צילום מסך, למקרה שארצה בעתיד לשנות את העיצוב. ככה זה לא ישפיע על הפוסט הנוכחי.

עיצוב הפוסטים המוטמעים

הפוסט המוטמע יהיה דומה למיליוני פוסטים אחרים ברשת כי כולם משתמשים בעיצוב ברירת המחדל של וורדפרס. מבחינה שיווקית, תדמיתית, מיתוגית יהיה חכם יותר לעצב את הפוסטים המוטמעים בצורה שונה כדי לבדל את האתר שלכם. למשל להוסיף צבעים של המותג שלכם, לשנות גדלים וכו'.

כדי לעשות זאת, נעשה שימוש בשני האקשנים. הראשון הוא embed_head שמוסיף סקריפטים אל התגית HEAD והשני הוא embed_footer במוסיף אלמנטים שונים לפני שהתגית BODY נסגרת.

שינוי עיצוב באמצעות CSS

אנחנו נוסיף עיצובי CSS מותאמים באמצעות האקשן embed_head:

function custom_embed_style() {
?>

}
add_action( ’embed_head', 'custom_embed_style' );

הפוסט המוטמע החדש יראה כך:

פוסט מוטמע מעוצב

פוסט מוטמע מעוצב

תסלחו לי שלא השקעתי בעיצוב. מטרת הפוסט רק להציג לכם איך זה מתבצע.

הוספת תכנים לפוטר

ועכשיו נוסיף טקסטים נוספים לפוטר באמצעות האקשן embed_footer:

function custom_embed_footer() {
?>

}
add_action( ’embed_footer', 'custom_embed_footer' );

הפוסט המוטמע החדש יראה כך:

פוסט מוטמע מעוצב עם שורת פוטר

פוסט מוטמע מעוצב עם שורת פוטר

אפשר להשתמש בזה כדי להוסיף שורה של כפתורי שיתוף באתר, אפשר להוסיף לינקים לרשתות חברתיות, אפשר להוסיף פרסומות גוגל, אפשר להוסיף אינסוף תכנים רק תפעילו את הדמיון… התפקיד שלי הוא ללמד אתכם איך לעשות את זה.

מאת רמי

אחראי על אתר וורדפרס בעברית ועל תרגום ושחרור גרסאות וורדפרס בעברית. מפתח ליבה, בכל גרסה החל מגרסה 2.8, מפתח מוביל בגרסה 4.4 ובגרסה 4.6. מספק שירותי פיתוח אתרים, פיתוח תוספי וורדפרס לסטרטאפים ופיתוח כלים למפתחי וורדפרס - GenerateWP.com.

הוסף תגובה !

נא לא לשאול שאלות שלא קשורות לפוסט, זהו לא פורום תמיכה. לבעיות אישיות ונושאים מורכבים אפשר ליצור איתי קשר.

תגיות HTML מורשות לשימוש:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>