מדריך לבנייה ועיצוב של ניוזלטר בדרופל 6

tom | ביום א', 05/20/2012 - 19:29

הי,

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

רוב המדריך מתאים למתחילים בדרופל, אולם כדאי להכיר קצת את הטרמינולוגיה של דרופל (node, taxonomy, views), וכן השלבים המתייחסים לעיצוב דורשים היכרות עם HTML ו CSS .

השקעתי זמן רב כדי לחקור את הנושא, לכן החלטתי לכתוב הכל למקרה שאולי עוד מישהו ימצא את המידע הזה שימושי. זהו פחות או יותר סיכום של הסאגה שפתחתי ב[שרשור הזה]( http://www.drupal.org.il/content/%D7%A2%D7%96%D7%A8%D7%94-%D7%91-templa…).

.
.
#### I. התקנה של רכיב לניהול רשימות תפוצה ####

התקינו והגדירו את רכיב [Simplenews](http://drupal.org/project/simplenews).
רכיב זה מוסיף סוג תוכן שנקרא "ניוזלטר" (newsletter), וכן מילון טקסונומיה מתאים.
- בעת יצירת תוכן חדש מסוג זה, תוכלו לשלוח אותו לרשימת המנויים שלכם.
- בנוסף, ניתן להגדיר סוגי תוכן אחרים הקיימים באתר כמיועדים לשליחה.
- תוכלו להוסיף תיבה בעמוד הבית שמאפשרת לאנשים להרשם לרשימת התפוצה שלכם, ואפשר גם לייבא רשימה קיימת אם יש.
- **טיפ למתקדמים:** אם רשימות התפוצה שלכם גדולות במיוחד וכוללות אלפי מנויים, כדאי מאד להגדיר תהליך [CRON](http://drupal.org/cron) על השרת כדי להקל על העומס בשליחת העלון ולפצל אותה למשימות קטנות.
בהגדרות של SN אפשר לבחור כמה מיילים לשלוח בכל ריצה של CRON.

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

.
.
#### II. התקנה של רכיב נלווה: שליחת מיילים HTML -ים ####

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

כדי שנוכל לשלוח מייל מעוצב, אנו זקוקים ליכולת לשלב קוד HTML בתוך המייל.
לשם כך יש להתקין את רכיב [MimeMail](http://drupal.org/project/mimemail)

כשלעצמו, MimeMail לא עושה דבר. אבל לאחר שנתקין רכיב זה, נוכל לשלוט במידה מסוימת על המראה של הניוזלטר. נוכל להוסיף הגדרות של מבנה HTML-י, נוכל להוסיף הגדרות עיצוביות שונות, כפי שמפורט בהמשך. היכנסו אל
mydomain/admin/settings/simplenews/newsletter
ובחרו בפורמט HTML עבור העלונים.

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

.
#### III. התקנה של רכיב נלווה: שילוב תוכן מעמוד הבית בניוזלטר ####

אתרים המעדכנים תכנים בתדירות גבוהה (למשל: חדשות, אירועים החודש...), ושולחים ניוזלטרים בתדירות גבוהה, אולי ישמחו להשתמש ברכיב הבא:
רכיב [SimpleNews Content Selection](http://drupal.org/project/simplenews_content_selection) מאפשר לבחור תכנים שמפורסמים כרגע בעמוד הבית של האתר, ולאגד אותם לעלון.
וכך, במקום לכתוב מחדש הכל בכל פעם שרוצים לשלוח עלון, - בשלושה קליקים אני יכולה לבחור תכנים שכבר פורסמו מעמוד הבית, ליצור ניוזלטר, ולשלוח לכל המנויים.
(ל SCS הגדרות פשוטות יחסית ווהן יתווספו למסכי הניהול של SN).

.
#### IV. עיצוב גרפי לעלון ####

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

עיצוב דואר אלקטרוני זו משימה לא פשוטה. ישנם אינסוף ספקי מייל, וכל אחד מהם מתמודד אחרת עם הצגת HTML בתוך המייל, ולכל אחד מהם הגבלות אחרות שונות ומשונות על מה מותר ומה אסור. חלקם מאפשרים עיצובים מסוימים וחלקם לא.
[הנה השוואה מדכאת בין ספקי מייל וההגבלות שלהם](http://www.campaignmonitor.com/css/), כדאי מאד לעיין בה.

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

ראשית, לא ניתן לשלב קובץ CSS חיצוני, ולא ניתן לשלב style ב header של ה HTML. זאת מכיוון שאנחנו לא שולחים עמוד HTML מלא: אין header, אלא רק את מה שבתוך ה body.
כדי לפתור את הבעיה הזו, עלינו להטמיע את העיצוב הרצוי inline styling, כלומר אין ממש טעם לכתוב

...

אלא

...

שוב ושוב בכל מקום. כן, זה מעצבן, אבל זה מה יש.

שנית, כדי לתכנן את המבנה (layout) של העמוד שלנו ,לא כדאי להשתמש בהגדרות float ו absolute וכדומה. ספקי מייל רבים יתעלמו מהם כדי שהעיצוב שלהם עצמם לא יפגע. כדי לפתור את הבעיה הזו, נצטרך לתכנן את ה layout בטבלאות במקום ב div, כפי שהיו עושים פעם פעם לפני עשר שנים בערך.

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

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

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

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

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

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

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

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

.
#### עיצוב המעטפת של העלון ####

עיצוב החלק הזה נשלט ע"י הרכיב SimpleNews.
במדריך של SN יש [הנחיות](http://drupal.org/node/369757) כיצד לעצב את המעטפת של העלון, כלומר את מה שמקיף את התוכן.
בקצרה:
העתיקו מתוך הספריה של המודול את הקובץ ששמו
simplenews-newsletter-body.tpl.php
והדביקו אותו בתוך הספריה של ה theme שלכם.

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

<?php print $body; ?>

נוסיף לקובץ את הטבלה ב HTML שתיכננו קודם, ונמקם את השורה הזו באחד התאים של הטבלה בהתאם.

אגב, קיים קובץ נוסף שנקרא
simplenews-newsletter-footer.tpl.php
וגם אותו ניתן להעתיק ולערוך, אולם הוא הרבה פחות משמעותי.

.
#### עיצוב החלק הפנימי של העלון ####

עיצוב החלק הפנימי נשלט ע"י הרכיב SCS ולא ע"י SN.

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

-כותרת 1
-תקציר
-כותרת 2
-תקציר
-כותרת 3
-תקציר

עבור כל פריט תוכן שתבחרו מעמוד הבית, הרכיב SCS ייצר שני div : העליון מציג את הכותרת של ה node, והשני מציג את התקציר. זהו.
סביר להניח שתרצו לדרוס את העיצוב היבשושי הזה. למשל אולי תרצו לשנות את גודל הפונטים. או אולי תרצו להציג שדות אחרים חוץ משדה הכותרת והתקציר, למשל שדה תמונה או שדה תאריך (הכוונה לשדות ששייכים לסוג התוכן הזה באמצעות CCK).

כיצד נעשה זאת?
[כך מסביר מפתח המודול:](http://drupal.org/project/simplenews_content_selection)

>Wherever you select nodes to create a newsletter. Each nodes goes true theme_scs_node_output. Override this in your theme and create a unique style for each node / node type.

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

function theme_scs_node_output($node) {
//$output = build your HTML here
return $output;
}

ולהדביק אותה בתוך הקובץ template.php , שנמצא בספריה של תבנית העיצוב שלכם.
לאחר מכן יש לשנות את שמה של הפונקציה (כך שיתאים לשם של תבנית העיצוב),
ואז ניתן לערוך אותה כפי שנרצה.

לעיון נוסף, [הנה עוד קצת דיונים](http://drupal.org/node/709750#comment-2886176) על דריסה מסוג זה.

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

function mythemename_scs_node_output($node) {
$output = '';
$output .= '

';
$output .= theme('imagecache', 'mypreset', $field->field_myimage[0]['value'];
$output .= '
';
$output .= '' . $node->title . '';
$output .= '
'. node_teaser($node->body) . '

';
$output .= '

';

return $output;
}

**הערה קטנה:** בדוגמה שהבאתי כאן שילבתי שדה תמונה imagefield, אם גם אתם בוחרים לעשות זאת, אל תשכחו להשתמש ב preset המתאים של imagecache. אתם לא רוצים לשלוח במייל תמונות ענקיות.

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

בהצלחה,
תום