ברוכים הבאים ל-LEMON!

קהילת LEMON הוקמה במטרה לשתף קטעי קוד (CSS, JS, PHP) ומדריכים שימושיים בין בוני אתרים באלמנטור.
באתר תוכלו למצוא מגוון קטעי קוד שונים שתוכלו לשלב באתרים שלכם. בנוסף, יעלו לאתר מדריכים מתקדמים בנושא אלמנטור, כלים ותוספים שקשורים לאלמנטור, ועוד מגוון מדריכים בנושא בניית אתרים.

הרשמו לניוזלטר

הרשמו עכשיו וקבלו עדכון מיידי בכל פעם שעולה תוכן חדש לאתר.

קבוצת LEMON בפייסבוק

אתם מוזמנים להצטרף!

מדריך מפורט להוספת שדה העתקת URL של פוסט/עמוד (כמו בLEMON 🍋)

אחד הדברים החשובים באתרי תוכן הוא לעודד את הגולשים לשתף את התוכן עם חברים. במדריך הזה נראה איך אפשר לעשות באלמנטור שדה שמאפשר לגולשים להעתיק בקלות את הURL של העמוד לclipboard שלהם.
כי למי יש זמן ב2021 ללחוץ על CTRL+C? בטוח לא לגולשים שלכם 😎

שלב 1 – הוספת טופס אלמנטור

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

נמחק את כל השדות ונשאיר רק שדה טקסט אחד, בנוסף לזה נשנה את התווית למצב ״הסתר״ כמו בתמונה.
בשדה שהשארנו נמחק את הטקסט פנימי ונשנה את התווית לURL.

בלשונית ״מתקדם״ נשנה את הID לurl

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

אז איך אנחנו פותרים את זה? בואו נראה 👇

שלב 2 – קוד PHP שמחזיר את כתובת העמוד הנוכחי

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

את הקוד אני מוסיף לקובץ הfunctions.php בוורדפרס (דרך הפאנל ניהול וורדפרס > עיצוב > עריכת תבנית > בוחר בfunctions.php)

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

הקוד PHP:

add_shortcode ('LMN_geturl', 'get_current_page_url');
function get_current_page_url() {
	$pageURL = 'http';
	if( isset($_SERVER["HTTPS"]) ) {
		if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
	}
	$pageURL .= "://";
	if ($_SERVER["SERVER_PORT"] != "80") {
		$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
	} else {
		$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
	}
	return urldecode($pageURL);
}Code language: PHP (php)

שלב 3 – הגדרות נוספות לטופס שלנו

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

עכשיו נכניס את השורטקוד: [LMN_geturl]

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

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

עכשיו נערוך קצת את העיצוב של הטופס שלנו ונבטל את הכפתור שליחה.

קוד CSS לטופס

selector input {
    direction: ltr;
}
selector input:focus {
    box-shadow: none;
}
#form-btn {
    display: none;
}
selector, selector input {
    cursor: pointer !important;
}Code language: CSS (css)

בנוסף, ב״סגנון״ אפשר לשנות את הריווח בין עמודות ושורת ל-0.

ביטול כפתור שליחה

ב״תוכן״ > כפתורים״ נוסיף את הID של הכפתור: form-btn

ונבטל את כל הפעולות אחרי שליחה

שלב 4 – הוספת טקסט לחיץ ״העתקת קישור״

מתחת לטופס שיצרנו נוסיף וידג׳ט כותרת.

ב״תוכן״ נרשום בכותרת ״העתקת קישור״ (או טקסט אחר לבחירתנו)
ונשנה בHTML ל: span

ב״מתקדם״ ניתן Z-index של 9
ונכניס CSS ID:
copy-btn

ובCSS מותאם של הוידג׳ט הזה נכניס את הקוד הבא:

selector {
    cursor: pointer;
}
selector span {
    transition: 0.2s;
}
selector:hover span {
    color: #000 !important;
}Code language: CSS (css)

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

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

השדה URL שלנו אמור להראות בשלב הזה בערך ככה:

עכשיו נשאר לנו משהו ממש קטן וזניח להוסיף… את הפונקצינליות של העתקת הטקסט 🙂

שלב 5 – קוד JS להעתקת הטקסט בלחיצה

כמעט סיימנו!
נשאר רק להוסיף וידג׳ט HTML ולהדביק שם את הקוד הבא:

<script>
    function UrlFromInput() {
      var copyText = document.getElementById("form-field-url");
      copyText.select();
      copyText.setSelectionRange(0, 99999);
      document.execCommand("copy");
      
      document.querySelector("#copy-btn span").innerHTML = "הועתק ללוח!";
    }
    document.getElementById("copy-btn").addEventListener("click", UrlFromInput);
    document.getElementById("form-field-url").addEventListener("click", UrlFromInput);
</script>Code language: HTML, XML (xml)

והתוצאה…

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

העתקת קישור

מוזמנים לשאול בפייסבוק!

9 תגובות

  1. הי כפיר.
    תודה ממש .
    אני עוקבת אחרי הפוסטים ומיישמת🥳.
    רציתי לשאול בכללי, האם כדאי תמיד להשתמש בתבנית בת?
    או שלא תמיד….

  2. היי חיים, תודה רבה על מדריך מעולה!
    עקבתי אחרי המדריך באדיקות, וזה לא עובד לי משום מה. אני מקבל שגיאה בקונסול:
    Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    מה פספסתי?

      1. חח דיברתי בדיוק לפני ההודעה עם חיים 🤦‍♂️
        איתך בפייסבוק. תודה!

כתיבת תגובה

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

לשאלות / בקשות / בעיות / כל דבר אחר… צרו איתנו קשר :)

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

הרשמו עכשיו וקבלו עדכון מיידי בכל פעם שעולה תוכן חדש לאתר.