צור קודי קוד לנושא WordPress שלנו

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

אחר כך הגיעו גרסאות אחרות, ולמרות שנוכל לקנות או לשכור שירותי אינטרנט מסוימים כדי ליצור את העיצובים שלנו כמו אלה של StudioDWeb.com, או לקנות תבניות שכבר נוצרו ב ThemeForest.net, תמיד רצינו להיות משלנו, מותאמים לצרכים שלנו ועוצרים ליד WebDevelopment.com יכול להיות לעזר 😀

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

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

וכך ייראו המאמרים:

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

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

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

לשם כך אנו משתמשים ב"סכין הצבא השוויצרית "של וורדפרסאני מתכוון לקובץ function.php שבדרך כלל אנו מוצאים כמעט בכל הנושאים.

Ejemplo del Function.php con los ShortCodes de DesdeLinux

מה שנעשה בקובץ זה הוא להוסיף את מבנה ה- ShortCode שלנו וכמובן את התווית שמציגה אותו. אז בואו נגיע לזה.

בתוך ה- Function.php

בתוך קובץ ה- function.php שלנו שנשים יהיה מבנה ה- HTML של ה- ShortCode, אך אין זה פשוט לשים את תגי ה- HTML בדיוק כך. יהיה לנו משהו כזה:

// תיבת פונקצית מידע ($ atts, $ content = null, $ code = "") {$ return = ' '; $ החזר. = $ תוכן; $ החזר. = ' '; להחזיר תמורה $; } // הוסף_קוצר קוד ShortCode ('מידע', 'תיבת דואר אלקטרוני');

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

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

לדוגמה:

$ החזר. = $ תוכן;

משתנה תוכן $ שם התוכן שהכנסנו ל- ShortCode כברירת מחדל הוא יחזיר ערך null אם לא נשים דבר.

עכשיו שמו של ה- ShortCode הוא מה שקבענו איתו:

add_shortcode( 'info', 'infobox' );

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

[ info ]Este será el ShortCode de ejemplo[ /info ]

אם כי כמובן, ללא הרווחים, אותם שמתי כי ברור ש- ShortCode יופעל.

סגנון ShortCode

אם אתה מסתכל על השורה למעלה, ללא קוד ה- PHP והמשתנים, ה- ShortCode ב- HTML טהור ייראה בערך כך:

<div class="alert-info"></div>

אז עלינו להחיל רק את סגנון CSS.

.alert.alert-info {background: # d9edf7 url (info.png) no-repeat 7px 50%; גבול רדיוס: 4 פיקסלים; גבול: 1px מוצק # bce8f1; צבע: # 3a87ad; גודל גופן: 14 פיקסלים; שוליים: 15 פיקסלים 15 פיקסלים; ריפוד: 15 פיקסלים 15 פיקסלים 15 פיקסלים 50 פיקסלים יישור טקסט: שמאל}

וזהו .. אני חוזר ואומר, אני לא מתכנת או משהו כזה, וההסבר שנתתי הוא איך אני מבין ש- ShortCode עובד 😛