מה היא תבנית ג'ומלה

תבנית ג'ומלה (template) היא ערכת עיצוב לאתר ג'ומלה. בשביל להבין את המשמעות של ערכת עיצוב, צריך להבין את האופן שבוא ג'ומלה עובדת.

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

הפרדה זו תאפשר לנו הרבה מאוד גמישות בעתיד. שינוי העיצוב אין משמעותו להתחיל את האתר מחדש.

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

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

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

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

רשמו את המילים הבאות בגוגל :    joomla free template

אתר ענק שמרכז כמעט את כל התבניות המוכרות בג'ומלה: best of joomla .

טיפים בבחירת תבנית

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

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

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

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

מה זה הקוד הזה?

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

תבניות ג'ומלה בניות מקוד PHP  המשלב בתוכו HTML.

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

נסו את זה, גשו לתוך תקיות האתר שלכם > גשו לתוך תקיית template > בחרו את התבנית שלכם > גשו לקובץ INDEX.PHP

templates> your templates > index.php

הביטו בקובץ בעזרת עורך טקסט. בדרך כלל ניתן לזהות די בקלות את המבנה:

יש לנו דיבים <div> של   HTML

<div class="example"> text </div>

ובתוך דיבים יש לנו קריאה לחלק אחר מהאתר של ג'ומלה. כאן בדוגמה יש לנו קריאה למודול בשם יוזר 1 .

<div class="example">
<jdoc:include type="module" name="user1" />
</div>

 

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

מיקומים בתבנית

תבנית ג'ומלה בנויה על "מיקומים" ( position ) .

מיקומים אלו נקבעים על ידי שלד התבנית. התבנית בנויה מקוביות  HTML . ובתוך הקוביות ניתן לשים "מיקום".
הנה דוגמה כיצד שמים "מיקום" בתוך קובייה של HTML:

<div class="example">
<jdoc:include type="module" name="mainmenu" title="user1" />
</div>

בתוך מיקום ניתן לשים מודול.

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

בשביל לדעת מה הן המיקומים אשר קיימים בתבנית – נוכל להשתמש במספר דרכים:

1 – לגשת לאתר היצרן ולראות. בדרך כלל מפת המודולים באתר שלכם תופיע גם בתבנית שהורדתם, אם התקנתם מידע לדוגמה.

הנה מפה לדוגמה:

דוגמא לאיזורים בתבנית

2 – להוסיף את הקוד הבא, אחרי שורת הכתובת:  tp=1?  - זה יציג לכם את המיקומים על המסך. נסו את זה על האתר הזה.

http://your-domain.co.il/?tp=1

3 – לא הכי יעיל, אבל בהחלט הכי נפוץ, הכנסו לתוך מנהל המודולים בפאנל הניהול של ג'ומלה > בחרו מודול, ושחקו עם המיקום שלו.

גמישות עם המיקומים והמודולים

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

הסרה של מיקום

ניתן פשוט לא להשתמש במיקום. ואז למעשה הוא לא קיים.

שילוב של מיקום

ניתן לשלב מודול בתוך אייטם/מאמר תוכן. אם לדוגמה אנחנו רוצים לשלב משהו בתוך התוכן. למשל לדגומה כאן:

פשוט מוסיפים - אפשר לקרוא על כך עוד כאן.

לדוגמה כמאמר הזה נוסיף מודול של שורות מתחלפות:

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

הוספת מיקום

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

מאתרים את המקום הרצוי עם פיירבאג. מוסיפים את הקוד הבא :

<div class="sample">
<jdoc:include type="modules" name="sample" style="xhtml" />
</div>

 

את מה שבתוך הקלאס  "class="sample – תוסיפו בתוך קובץ ה CSS של האתר שלכם. זה יתן לכם עיצוב ייחודי במידה ואתם רוצים. לדוגמה מיקום עם רקע אדום.

.samp {background:red; }

 

את השם של המודול שנתתם בקוד שהוספתם, תוסיפו בתוך פאנל הניהול של ג'ומלה > במודול הרצוי > בתוך "מיקום". פשוט לכתוב בפנים, זה הכל.

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

עליך להירשם כדי להוסיף תגובות

נתן שלווה

מעצב ומתכנת פרילנסר. מלמד בנס-טכנולוגיות, שנקר ועוד.