בניית אתר דו לשוני בוורדפרס באמצעות פולילנג

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

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

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

אפשרויות התוסף פולילנג

• באפשרותכם ליצור כמה שפות שרק תרצו. ישנה תמיכה בשפות מימין לשמאל (RTL). כאשר ניתן, התוסף מוריד אוטומטית את קבצי השפה הרלוונטים לשפות שהוספתם.
• התוסף נותן לכם את האפשרות לתרגם עמודים, פוסטים, קטגוריות, תגיות, תפריטים וווידג׳טים, כמו גם, סוגי תוכן מותאמים (Custom Post Types), טקסונומיות שיצרתם, פוסטים דביקים, פורמטים של פוסטים ואף פידים (RSS).
• במידה ותבחרו, קטגוריות, תגיות ועוד שדות מטא יועתקו אוטומטית כאשר אתם מוסיפים תרגום לעמוד או פוסט מסויים. ישנה גם האפשרות לסנכרן אלו בין פוסט מסויים למקביל שלו בשפה הנוספת.
• התוסף תומך Multisite, קישורים קבועים יפים (Pretty Permalinks) ועמוד בית סטטי.
• האפשרות להחליף שפה מגיעה יחד עם התוסף או כווידג׳ט או כחלק מהתפריט של אתר הוורדפרס שלכם.
• התוסף מציע API למפתחים שביניכם.
• התוסף ידידותי לקידום האתר ו SEO ויודע לעבוד עם רוב תוספי ה SEO השולטים בשוק, כמו כן הוא דואג ליצירת תגיות hreflang ותגיות opengraph בצורה אוטומטית.

התקנה והוספת שפות בפולילנג

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

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

לצורך המדריך נתייחס למצב בו אתר הוורדפרס שלנו הוא בעברית ונוסיף לו את השפה האנגלית.

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

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

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

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

החלפת שפה בפולילנג

התוסף Polylang מספק לכם שתי אפשרויות להוספה של כפתור החלפת שפה או בשמו האחר ״מחליף שפות״ (Language Switcher). הראשונה היא באמצעות התפריט הראשי של האתר והשנייה היא באמצעות ווידג׳ט אשר יופיע בסרגל הצדדי (או בכל מקום שניתן להכניס ווידג׳טים בתבנית שלכם).

הוספת מחליף השפות בתפריט הראשי

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

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

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

הוספת מחליף השפות באיזור הווידג׳טים

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

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

תרגום תוכן באמצעות פולילנג

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

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

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

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

תהליך הוספת השפה זהה לכל סוגי התוכן, בין אם זה תגיות, קטגוריות או בין אם זה פוסטים.

הגדרות התוסף Polylang

ניתן מבט הגדרות התוסף הנמצאות תחת שפות > הגדרות בלוח הבקרה של וורדפרס.

לתוסף Polylang אין הגדרות יותר מדי מתוחכמות (וטוב שכך). נעבור על ההגדרות ונסביר כל אחת מהן:

1. שינויי URL – בחלק זה יש באפשרותכם לבחור את מבנה הקישורים (URL) של השפות השונות. ישנן מספר אפשרויות:

• השפה מוגדרת רק בתוכן – ניתן לקבוע כי ה URL של הפוסטים העמודים ושאר סוגי התוכן אינו ישתנה ויוצג בהתאם לתוכן ללא שום שינויי בהתאם למזהה הכתובת (slug) של אותו תוכן.
• במבנה הקישורים השפה מופיעה כתיקיה – השפה תופיע במבנה הקישורים כתיקייה. לדוגמא – http://test-wp/en/my-post.
•  במבנה הקישורים השפה מופיעה כסאב דומיין – השפה תופיע במבנה הקישורים כסאב דומיין. לדוגמא – http://en.test-wp/my-post.
• השפות מופיעות בדומיינים שונים –  לכל אחת מהשפות ישנו דומיין אחר לגמרי.
• הסרת שינוי כתובת עבור שפת ברירת מחדל – ניתן לקבוע כי שינוי מבנה הקישורים אינו יתבצע עבור שפת ברירת המחדל.
• למחוק /language/ לפני שם השפה במבנה הקישורים – הבחירה האם להסיר את המילה language לפני השפה ממבנה הקישורים. לדוגמא http://test-wp/en
• לשמור /language/ לפני שם השפה במבנה הקישורים – ההפך מהסעיף הקודם. לדוגמא – http://test-wp/language/en
• כתובת עמוד הבית מכילה את קוד השפה במקום שם העמוד או מזהה (ID) העמוד – הבחירה האם הכתובת של עמוד הבית תכיל את השפה ולא את שם העמוד או המזהה שלו. לדוגמא – במקום http://test-wp.com/home יופיע http://test-wp.com/en.

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

2. זיהוי שפת הדפדפן (Detect Browser Language) – ניתן לקבוע האם Polylang תפנה אוטומטית לעמוד בשפה מסויימת בהתאם לשפה של הדפדפן בו הוא משתמש.

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

4. סוגי תוכן מותאמים וטקסונומיות (CPT & Taxonomies) – מאפשר לכם לבחור לאיזה סוגי תוכן מותאמים אישית ולאילו טקסונומיות מותאמות אישית תופיע האפשרות להוספת שפה.

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

6. כלים (Tools) – מאפשר לקבוע האם למחוק ממסד הנתונים את כל המידע וההגדרות של Polylang במידה ואתם מוחקים את התוסף.

מחרוזות תרגומים

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

השימוש של פולילנג בתבניות וורדפרס

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

pll_the_languages( $args );

כאשר $args הוא מערך אופציונלי והאפשרויות הינן:

• ‘dropdown’ => displays a list if set to 0, a dropdown list if set to 1 (default: 0)
• ‘show_names’ => displays language names if set to 1 (default: 1)
• ‘display_names_as’ => either ‘name’ or ‘slug’ (default: ‘name’)
• ‘show_flags’ => displays flags if set to 1 (default: 0)
• ‘hide_if_empty’ => hides languages with no posts (or pages) if set to 1 (default: 1)
• ‘force_home’ => forces link to homepage if set to 1 (default: 0)
• ‘echo’ => echoes if set to 1, returns a string if set to 0 (default: 1)
• ‘hide_if_no_translation’ => hides the language if no translation exists if set to 1 (default: 0)
• ‘hide_current’=> hides the current language if set to 1 (default: 0)
• ‘post_id’ => if set, displays links to translations of the post (or page) defined by post_id (default: null)
• ‘raw’ => use this to create your own custom language switcher (default:0)

שימו לב כי במידה ואינכם משתמשים באפשרות ה dropdown, עליכם להדפיס בעצמכם את תגיות ה ul.

א. דוגמאות לשימוש pll_the_languages

<!-- outputs a list of languages names -->
<ul>
    <?php pll_the_languages(); ?>
</ul>

<!-- outputs a flags list (without languages names) -->
<ul>
    <?php pll_the_languages( array( 'show_flags' => 1, 'show_names' => 0 ) ); ?>
</ul>

<!-- outputs a dropdown list of languages names -->
<?php pll_the_languages( array( 'dropdown' => 1 ) ); ?>

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

$translations = pll_the_languages( array( 'raw' => 1 ) );

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

• [id] => language id
• [slug] => language code used in urls
• [name] => language name
• [url] => url of the translation
• [flag] => url of the flag
• [current_lang] => true if this is the current language, false otherwise
• [no_translation] => true if there is no available translation, false otherwise

פונקציה נוספת שסביר להניח ותשתמשו בה הינה pll_current_language אשר מחזירה את השפה הנוכחית של העמוד. הארגומנט $value הוא אופציונלי ומאפשר לבחור האם להחזיר את שם השפה, את ה locale שך אותה שפה או את המזהה של השפה (slug) – שהוא גם ברירת המחדל.

תוכלו לתת מבט על פונקציות נוספות ש Polylang מציעה בדוקומנטציה של התוסף.

ב. בדיקה האם פולילנג פעיל

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

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

<?php
/**
 * Detect plugin. For use in Admin area only.
 */
if ( is_plugin_active( 'plugin-directory/polylang.php' ) ) {
    //plugin is activated
} 
?>

ג. מה לגבי עיצוב ו CSS שונה לכל אחת מהשפות בפולילנג?

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

.element:lang(en) {
    direction: ltr !important;
    text-align: left !important;
}

.element:lang(he) {
    direction: rtl !important;
    text-align: right !important;
}

נאמר כי בדרך כלל בתבניות הבנויות עבור שפות הכתובות מימין לשמאל (עברית וערבית לדוגמה) קיים קובץ בשם rtl.css בו ניתן להשתמש עבור CSS ספציפי לשפות RTL.

לחילופין, ניתן לייצר קובץ stylesheet, כלומר קובץ CSS שונה עבור כל שפה. אם תצרו קובץ בשם en_US.css, fr_FR.css או he_IL.css ותוסיפו אותם לתיקייה הראשית של התבנית, אלו ייטענו אוטומטית בהתאם לשפה המופיעה בשם הקובץ עצמו.

ד. החלפת תמונות הדגלים בפולילנג

ניתן בקלות לשנות את תמונות הדגלים הדיפולטיות שפולילנג מציעה. אתם יכולים להשתמש בקבצים מסוג PNG, JPG או SVG ולתת להם את שם השפה – למשל en_US.png. עליכם להעלות קבצים אלו לתיקייה /wp-content/polylang/ בכדי שאלו יופיעו.

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

שימו לב! על זה להתווסף כפלאגין (עדיף mu-plugin) בלבד ולרוץ לפני שהפעולה plugins_loaded מתבצעת. לכן צרו קובץ בשם polylang-flag.php (למשל) והוסיפו לו את הקוד הבא:

<?php
/*
Plugin Name: Polylang Flag Mu
Plugin URI: https://savvy.co.il/
Version: 1.0
Author: Roee Yossef
Author URI: https://savvy.co.il/
License: GPLv2
*/
// To prevent calling the plugin directly
if (!function_exists('add_action')) {
    echo 'Please don&rsquo;t call the plugin directly. Thanks :)';
    exit;
}

function pll_custom_flag( $flag, $code ) {
    $flag['url']    = "/wp-content/polylang/{$code}.svg";
    $flag['width']  = 32;
    $flag['height'] = 32;
    return $flag;
}
add_filter( 'pll_custom_flag', 'pll_custom_flag', 10, 2 );

העתיקו קובץ זה לתיקיית /wp-content/mu-plugins/ ובזה סיימתם. מניח שאתם מבינים היכן לשנות את הגובה והרוחב בקוד זה…

ה. ומה ברמת פיתוח תבנית הבנוייה עם פולילנג?

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

<?php if (get_locale() == 'he_IL')  { 
    echo '<h1>כותרת בעברית</h1>';
}
elseif (get_locale() == 'en_US') {
    echo '<h1>English Title</h1>';
}
?>

לסיכום

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

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

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

שתפו אותנו במחשבות לגבי התוסף, יתרונות וחסרונות לגבי תוספים אחרים או כל מה שעולה לכם בראש… 🙂