מדריך מפורט להוספת שדה העתקת 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)

והתוצאה…

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