באמצעות עורך TinyMCE ב WordPress [מדריך]

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

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

הוספת לחצנים זמינים

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

הצעד הראשון הוא ליצור תוסף. תסתכל על קודקס וורדפרס על איך לעשות את זה. בקיצור, אתה יכול להסתדר עם יצירת תיקייה בשם 'My-mce-plugin' בתיקייה wp-content / plugins. צור קובץ עם אותו שם, עם סיומת PHP: My-mce-plugin.php.

בתוך קובץ זה הדבק את הדברים הבאים:

  
לאחר שתסיים אתה אמור להיות מסוגל לבחור את תוסף זה וורדפרס ולהפעיל אותו. כל הקוד מעתה ואילך יכול להיות מודבק בתוך קובץ זה.
 
אז, בחזרה אל המאפשר כמה לחצנים מובנים, אך נסתרים. הנה הקוד שמאפשר לנו להפעיל את 3 הלחצנים שהזכרתי:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); הפונקציה my_tinymce_buttons (לחצני $) $ button [] = 'עילי'; $ לחצנים [] = 'subscript'; $ $ [= = hr; לחזור לחצנים $;  
 
 
 
כדי לדעת אילו לחצנים ניתן להוסיף ומה הם נקראים, תסתכל על הרשימה נמצא בתיעוד TinyMCE עבור פקדים.
 
יצירת לחצנים שלנו
 
מה דעתך על יצירת הכפתורים שלנו מאפס? אתרים רבים משתמשים פריזמה עבור קוד הדגשת אשר משתמשת בגישה סמנטית מאוד לסימון קטעי קוד. אתה צריך לעטוף את הקוד שלך בפנים  ו 
 תגים, משהו כזה:
 
$ variable = 'value'
 
בואו ליצור כפתור אשר יעשה את זה בשבילנו!
 
זהו תהליך בן שלושה שלבים. יהיה עליך להוסיף כפתור, לטעון קובץ JavaScript ולמעשה לכתוב את התוכן של קובץ Javascript. בואו נתחיל!
 
הוספת הלחצן וטעינת קובץ Javascript היא פשוטה למדי, הנה הקוד שבו השתמשתי כדי לבצע אותו:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); function pre_code_add_button (לחצני $) $ buttons [] = 'pre_code_button'; לחזור לחצנים $;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); function pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; return $ plugin_array;  
 
כאשר אני רואה הדרכות על זה אני רואה לעתים קרובות 2 בעיות.
 
הם מזניחים להזכיר זאת שם הלחצן שנוסף בפונקציה pre_code_add_button () חייב להיות זהה למפתח המשתנה $ plugin_array בפונקציה pre_code_add_javascript (). אנחנו גם צריכים השתמש באותה מחרוזת ב- Javascript שלנו מאוחר יותר.
 
כמה הדרכות גם להשתמש בקו admin2head נוסף כדי לעטוף את הכל. אמנם זה יעבוד, זה לא נדרש וכיוון קודקס אינו משתמש בו, זה כנראה יש להימנע.
 
השלב הבא הוא לכתוב Javascript כדי ליישם את הפונקציונליות שלנו. הנה מה שהייתי מקבל 
 ו  תגים פלט בבת אחת.
 
 הפונקציה () (txymce.PluginManager.add ('pre_code_button', הפונקציה (editor, url) editor.addButton ('pre_code_button', text: 'פריזמה', icon: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = '
'+ נבחר +'
' editor.insertContent (תוכן + "\ n"); ); ); ) (); 
 
רוב זה מוכתב על ידי איך תוסף TinyMCE אמור להיות מקודד, אתה יכול למצוא קצת מידע על זה בתיעוד TinyMCE. לעת עתה, כל מה שאתה צריך לדעת הוא זה את שם הכפתור שלך (pre_code_button) יש להשתמש בשורה 2 ו -3. הערך של "טקסט" בשורה 4 יוצג אם לא תשתמש בסמל (אנו נסתכל על הוספת סמלים תוך רגע).
 
שיטת onclick מכתיבה מה כפתור זה עושה כאשר הוא נלחץ. אני רוצה להשתמש בו כדי לעטוף טקסט שנבחר בתוך מבנה HTML שנדונו קודם לכן.
 
את הטקסט הנבחר ניתן לתפוס באמצעות tinyMCE.activeEditor.selection.getContent (). לאחר מכן, אני לעטוף את האלמנטים סביבו ולהכניס אותו, להחליף את התוכן מודגש עם אלמנט חדש. הוספתי גם שורה חדשה כדי שאוכל להתחיל לכתוב בקלות אחרי אלמנט הקוד.
 
אם אתה רוצה להשתמש בסמל אני מציע לבחור אחד מתוך קבוצת דשיקונים אשר ספינות עם וורדפרס. הפניה מפתח יש כלי נהדר למציאת סמלים CSS שלהם / HTML / גליף. מצא את סמל הקוד וציין את ה- Unicode שמתחתיו: f475.
 
נצטרך לצרף גיליון סגנונות לתוסף שלנו ולאחר מכן להוסיף סגנון פשוט להצגת הסמל שלנו. ראשית, בואו להוסיף את הסגנון שלנו וורדפרס:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); (pre_code_button), plugins_url ('/style.css', __FILE__));  
 
חזור אל Javascript ובסמוך לסמל בפונקציה addButton, החלף “שקר” עם הכיתה אתה רוצה את הכפתור יש - השתמשתי pre_code_button.
 
כעת צור את הקובץ style.css בספריית התוספים והוסף את CSS הבא:
 
 i.mce-i-pre_code_button: לפני font-family: dashicons; תוכן: "\ f475";  
 
 
 
שים לב כי הלחצן יקבל את mce-i- [הכיתה שלך כאן] בכיתה שבה ניתן להשתמש כדי למקד ולהוסיף סגנונות. ציין את הגופן בתור dashicons ואת התוכן באמצעות ערך unicode מ קודם.
 
שימוש ב- TinyMCE במקום אחר
 
יישומי פלאגין יוצרים לעתים קרובות textareas להזנת טקסט ארוך יותר, האם זה לא יהיה נהדר אם נוכל להשתמש TinyMCE שם גם? כמובן שאנחנו יכולים, וזה די קל. הפונקציה wp_editor () מאפשרת לנו פלט אחד בכל מקום מנהל, הנה איך זה נראה:
 
wp_editor ($ initial_content, $ element_id, $ settings);
 
הפרמטר הראשון קובע את התוכן הראשוני עבור התיבה. זה יכול לשמש כדי לטעון אפשרות מתוך מסד הנתונים, למשל. הפרמטר השני קובע את מזהה האלמנט של HTML. הפרמטר השלישי הוא מערך של הגדרות. כדי לקרוא על ההגדרות המדויקות אתה יכול להשתמש, תסתכל על תיעוד העורך wp.
 
ההגדרה החשובה ביותר היא טקסט. זה מאכלס את התכונה שם של אלמנט textarea, ומאפשר לך לשמור את הנתונים בקלות. כך נראה העורך שלי בעת שימוש בדף אפשרויות:
 
$ settings = array ('textarea_name' => 'buyer_bio');
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ settings);
 
זה שווה לכתוב את הקוד הבא, אשר תוביל textarea פשוטה:
 
<?php get_option( 'buyer_bio' ) ?>
 
סיכום
 
עורך TinyMCE הוא דרך ידידותית למשתמש המאפשרת למשתמשים גמישות רבה יותר בעת הזנת תוכן. זה מאפשר לאלה שאינם רוצים לעצב את התוכן שלהם פשוט להקליד את זה ולסיים עם זה, ואלו שרוצים להתעסק עם זה לבלות כמה זמן שהם צריכים לקבל את זה בדיוק.
 
יצירת לחצנים חדשים ופונקציונליות ניתן לעשות בצורה מודולרית מאוד, ואנחנו רק רק גירד את פני השטח של האפשרויות. אם אתה יודע טוב במיוחד תוסף TinyMCE או להשתמש במקרה אשר עזר לך הרבה, תודיע לנו את ההערות להלן!