חדש בוורדפרס 4.4 – הטמעת תצוגה מקדימה של עמודי וורדפרס אחרים בפוסט

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

השימוש פשוט:

  • להדביק את הלינק לפוסט בשורה חדשה.
  • אם רואים ריבוע ריק / ההטמעה לא תקינה, שימו לב שיש שורה ריקה מעל הלינק ומתחת הלינק וייפתר.

כך נראה העורך טקסט של הפוסט הזה:

הטמעת תצוגה מקדימה פוסט
צילום מסך עורך טקסט

הטמעה לדוגמה:

הדרכה אישית בוורדפרס

איך לעצב את התצוגה מקדימה בCSS:

ההטעמה כמו שהיא, בגלל הגדרות מסויימות בתבנית יכול להראות חתוך/חלקית כמו בתמונה הבאה.

כך היה נראה ההטמעה בעמוד הזה לפני שהוספנו CSS.

תצוגה מקדימה

הסיבה שיש הגדרות גובה ורוחב מובנים לאלמנט ה-iframe.

נטמיע את הCSS הבא והרוחב יהיה 100% , והגובה יהיה תקין ולא חתוך:

.wp-embedded-content {
	width:100% !important;
	height:250px !important;
}

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

להלן הקוד שיוצר את העיצוב להטעמה בעמוד הזה:

// Add style to embed links
add_action( 'embed_head', 'embed_top_style' );	
function embed_top_style(){ ?>
	<style>
		.wp-embed , .wp-embed-heading , .wp-embed-heading a {
			color:white;
		}
		.wp-embed {
			background-color: black;
		}
		.wp-embed-heading { 
			background-color: black ;
			text-align:center;
		}
	</style>	
<?php }

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

הפיצר נחמד, אך עדיין לא מושלם. בגלל שההטמעה מבוצעת על ידי iframe (הטמעת דף אינטרנט בתוך הדף), ולא בתור חלק מה-DOM (מבנה אורגני) של הדף יש 2 בעיות:

  1. הלינקים והטקסט של ההטמעה הם לא חלק אורגני מהדף, מה שיכול להשליך על SEO.
  2. בגלל שהאלמנטים שמוטמעים מופיעים בתוך iframe, אי אפשר לגשת אליהם בCSS. מה שאנחנו שינינו מקודם הוא רק את המסגרת של הiframe, אבל אין לנו גישה לתוכו עם CSS.

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

לכל טעות / תיקון / אי דיוק, נשמח להערות / הערות.

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *