مفاهیم پایه قالب های جوملا

آموزش جوملا
هدف اصلی از طراحی جوملا این بوده است که به روز رسانی و تغییر ظاهر وبسایت برای مدیران سایت ساده و آسان باشد. برای تغییر قالب وبسایت جوملا کافی است یک قالب جدید که قبلا طراحی شدهاست را نصب کرده و آن را به عنوان قالب پیش فرض سایت انتخاب کنید. یک ویژگی دیگر نصب قالب های مختلف و اختصاص آنها به گزینه های منو  است که این امکان را برای شما فراهم می کند که یک محتوای موجود در یک گزینه منو  را به شکل و فرمت خاص همان قالب نمایش دهید.


طراحی استایل ها و CSS

استفاده از سیستم قالب ها در جوملا انعطاف پذیری زیادی به نحوه نمایش وبسایت می بخشد. به سادگی می توان طراحی و سبک نمایش یک وبسایت را با تغییر قالب تغییر داد.استفاده از زبان Cascading Style Sheets یا CSS اصلی ترین روش برای طراحی ظاهر وبسایت های جوملا است.

یک ابزار مفید برای درک چگونگی کارکرد CSS استفاده از Firebug ( یک افزونه برای مرورگر های کروم و فایرفاکس) است.Firebug به شما امکان می دهد CSS اعمال شده روی هر عنصر را مشاهده کرده و در صورت نیاز آن را ویرایش کرده و پیش نمایشی از تغییرات ایجاد شده را در مشاهده کنید . تغییرات اعمال شده در Firebug تا پیش بارگذاری مجدد صفحه نمایش داده می شوند اما برای ایجاد کامل تغییرات باید فایل های CSS را ویرایش کنید.

ایجاد یک استایل CSS به دو بخش نیاز دارد : اول یک انتخابگر (selector) , که یک عنصر از HTML ,ID و یا کلاسی است که می خواهید استایل را روی آن اعمال کنید؛ و یک تعریف که استایلی است که می خواهید روی انتخابگر اعمال شود. یکی از معمول ترین انتخابگر ها (X)HTML در فایل های CSS تیتر ها یا تگ های h1,h2,... و پاراگراف هستند که در HTML با تگ p نمایش داده می شوند.

تعدادی کلاس خاص تعریف شده در جوملا وجود دارد از جمله عنوان کامپوننت که در فایل های CSS با componentheading. نمایش داده می شود. برخی از طراحان مانند طراحان قالب beez استایل ها را با توجه به گزینه هایی که استایل روی آنها اعمال می شود به چند فایل CSS تقسیم کنند به عنوان مثال تمام استایل های مربوط به موقعیت ها در یک فایل و یا اگر استایلی تنها روی یک مرورگر خاص اعمال می شود در یک فایل جداگانه با نام همان مروگر , برخی طراحان نیز ترجیح می دهند برای کل استایل های قالب از یک فایل استفاده کنند.

وبسایت W3schools.com جایی عالی برای کسب اطلاعات بیشتر درباره CSS است . در این وبسایت می توانید چگونگی کارکرد و استفاده از CSS را با استفاده از آموزش های کاربردی و ساده موجود در سایت بیاموزید.نرم افزار های زیادی برای کار با CSS وجود دارند از جمله CSSEdit برای سیستم های مک و StyleMaster برای سیستم های مک و ویندوز.

فایل های یک قالب ساده

قالی های جوملا ممکن است خیلی ساده و یا خیلی پیچیده باشند.تمام قالب ها از اصولی پیروی می کنند که در همه قالب ها ثابت است. در پوشه templates سه زیر پوشه rhuk_milkyway , beez و ja_purity وجود دارد که سه قالب موجود در جوملا ۱.۵ را نشان می دهند.تمام این قالب ها ساختار مشابهی دارند . ساختار مورد نظر در لیست زیر مشخص شده است:

index.html : این یک فایل index خالی است که به تامین امنیت پوشه قالب کمک می کند.

index.php :این فایل ساختار وبسایت را شامل می شود, از جمله کد هایی که محتوای جوملا را در عناصر مختلف نمایش خواهد داد.

templateDetails.xml :این فایل تمام اطلاعات قالب , نویسنده و نسخه ای جوملا که قالب برای آن طراحی شده است را شامل می شود . همچنین تمام فایل ها و پوشه هایی که در قالب قرار دارد و تمام موقعیت هایی که عناصر مختلف جوملا از آن استفاده خواهند کرد در این فایل لیست شده اند.

پوشه تصاویر : تمام تصاویری که در قالب استفاده شده است در این پوشه قرار دارد. همچنین یک فایل index.html نیز برای تامین امنیت در این پوشه قرار دارد.

پوشه CSS :تمام فایل های CSS قالب در این پوشه قرار دارد . همچنین یک فایل index.html نیز برای تامین امنیت در این پوشه قرار دارد. در اکثر قالب ها چندین فایل CSS وجود دارد.

template.CSS :این فایل در پوشه CSS قرار داشته و تمام کد های CSS قالب را شامل می شود.

favicon.ico :این یک فایل آیکن است که شما می توانید با توجه به نیاز و کاربرد صفحه خود آن را ویرایش کنید.این فایل در مرورگر ها کنار نوار آدرس و یا هنگام و مشاهده علاقه مندی ها در مرورگر نمایش داده می شود .شما می توانید به صورت آنلاین favicon را در برخی سایت ها مانند www.htmlkit.com یا www.dynamicdrive.com ایجاد کنید.


موقعیت های قالب

موقعیت های قالب دستوراتی در فایل index.php هستند که موقعیت خروجی عناصر جوملا را در فایل مشخص می کنند.موقعیت ها با استفاده از نوعی دستورات با عنوان jdoc مشخص می شوند . برخی نمونه های از دستورات jdoc که در فایل index.php قالب شما وجود خواهد داشت به شرح زیر است :

<jdoc:include type="head" /> : این دستور به فایل می گوید که خروجی اطلاعات موجود در head صفحه مانند عنوان صفحه , توضیحات و کلمات کلیدی را بگیرد .

<jdoc:include type="modules" name="user3" /> : این دستور خروجی ماژول هایی که در موقعیت user3 قرار دارند را می گیرد. شما می توانید از موقعیت های موجود در هر قالب استفاده کرده و یا با درج دستور jdoc مورد نظر خود را در جایی که می خواهید خروجی ماژول های مرتبط با آن نمایش داده شوند در فایل index.php , یک موقعیت جدید ایجاد کنید.

<jdoc:include type="message" /> : این دستور خروجی هر دستور سیستم از جمله عدم دسترسی , تکمیل یک عملیات و یا خطا در اجرای یک عملیات را می گیرد. این موقعیت معمولا بالای خروجی کامپوننت قرار می گیرد به طوری که به راحتی توسط کاربران قابل مشاهده باشد.

<jdoc:include type="component" /> : این دستور خروجی محتوای اصلی سایت مانند مطالب کامپوننت محتوا را می گیرد . همچنین خروجی هریک از کامپوننت های نصب شده مانند وب لینک ها یا فرم ها در این موقعیت نمایش داده می شود.

<jdoc:include type="modules" name="debug" /> : این دستور اطلاعات مربوط به اشکالزدایی سایت که در پیکربندی کلی سایت فعال شده است را می گیرد.اغلب اوقات اشکالزدایی سایت را غیر فعال می کنید مگر این که در حال توسعه وب سایت خود باشید.


برای اغلب مدیران وبسایت مهم ترین این دستورات آنهایی هستند که یک موقعیت مشخص برای نمایش ماژول ها ایجاد می کنند.برخی اسامی وجود دارد که اغلب برای نام گذاری موفعیت ها در جوملا به کار می روند . از جمله :

top

left

right

breadcrumb

user1

user2

user3

user4

syndicate

debug

footer



با این حال مهم است که بدانید نام موقعیت ها لزوما مکان آنها در صفحه را مشخص نمی کند. راه های مختلفی برای مشاده جای قرار گرفتن موقعیت ها در صفحه وجود دارد. در صفحه مدیریت قالب وقتی یک قالب را برای ویرایش انتخاب کرده باشید , لینک نمایش سایت در نوار ابزار وجود دارد .با کلیک روی این لینک قالب همراه ما موقعیت ها نمایش داده می شود .در بخش کاربری قالب با افزودن tp=1? در انتهای آدرس هریک از صفحات موقعیت ها روی قالب نمایش داده می شوند . آخرین راه این است که کد های موجود در فایل index.php را بخوانید . با اینکار درک بهتری از کد ها و کارکرد آنها به دست می آورید.

شما می توانید با افزودن module chrome به یک دستور jdoc خروجی ماژول ها را کنترل کنید. به عبارت دیگر با افزودن style="chromestyle" می توانید نحوه نمایش ماژول ها در یک موقعیت را کنترل کنید. به عنوان مثال

<jdoc:include type="modules" name="user1" style="chromestyle" />

شش module chrome پیش فرض در جوملا وجود دارد و در سیستم قالب های جوملا این امکان برای شما فراهم است که استایل chrome مورد نظر خود را ایجاد کنید. شش module chrome پیش فرض به شرح زیر است :

<jdoc:include type="modules" name="user1" style="rounded" />
rounded : این استایل خروجی ماژول را در یک سری div با گوشه های گرد شده قرار می دهد همچنین شما می توانید با ویرایش فایل های CSS از سایر گزینه های موجود برای نمایش لبه و گوشه های ماژول ها نیز استفاده کنید.در قالب milkyway از همین استایل برای گرد کردن گوشه های تمام ماژول ها استفاده شده است .

<jdoc:include type="modules" name="user1" style="table" />
table : این استایل خروجی ماژول را در یک طرح مبتنی بر جدول قرار می دهد.

<jdoc:include type="modules" name="user1" style="horiz" />
horiz :این استایل خروجی ماژول را در یک طرح مبتنی بر جدول افقی قرار می دهد.

<jdoc:include type="modules" name="user1" style="xhtml" />
xhtml : این استایل خروجی ماژول را در یک طرح مبتنی بر div قرار می دهد.

<jdoc:include type="modules" name="user1" style="none" />
none : این استایل گزینه های ماژول از جمله عنوان را به صورت نوار نمایش می دهد . در واقع این استایل ماژول را مشابه horiz نمایش می دهد با این تفاوت که از جدول برای نمایش ماژول استفاده نمی کند.

<jdoc:include type="modules" name="user1" style="outline" />
outline : این استایل خروجی ماژول را در لایه نمایش قرار می دهد . از این استایل برای پیش نمایش ماژول ها استفاده می شود.



شما همجنین می توانید با ایجاد یک فایل module.php استایل جایگزین مورد نظر خود را ایجاد کنید . نمونه هایی از این استایل ها در هریک از قالب های پیش فرض موجود در جوملا وجود دارد . شما همچنین می توانید با استفاده از سیستم جایگزینی طرح جایگزین هایی برای ماژول های خاص ایجاد کنید در ادامه این موضوع را شرح می دهیم .

جایگزین های قالب

یک امکان جدید که در جوملا ۱.۵ اضافه شده است امکان استفاده از جایگزین های قالب است. جایگزین های قالب این امکان را برای هرکس فراهم می کنند که با جایگزینی طرح نمایش کامپوننت ها و ماژول ها با طرح های جدید موجود در قالب, نحوه نمایش آنها را تغییر دهد. برای استفاده از جایگزین ها باید فایلی همنام با فایل اصلی موجود در هسته جوملا ایجاد و در جای مناسبی در پوشه قالب قرار داده شود . جوملا همواره پیش از ایجاد صفحات وب با استفاده از قالب و پایگاه داده بررسی می کند که آیا فایل جایگزینی برای هریک از فایل های هسته در قالب شما وجود دارد یا خیر .

این جایگزین ها اغلب در پوشه ای با عنوان html در مسیر اصلی قالب قرار می گیرند. این قابلیت در قالب beez نمایش داده شده است . beez اولین قالبی بود که با استفاده از از این قابلیت جوملا طراحی شد و جایگزین هایی برای بسیاری از طرح های پیش فرض موجود در هسته جوملا ارائه کرد و به همین علت به عنوان مدلی برای توسعه دهندگان قالب که می خواهند از این امکان استفاده کنند, معرفی شد.

قالب beez شامل جایگزین های زیادی برای کامپوننت ها و ماژول های هسته جوملا است. در ادامه جایگزین محتوا به عنوان مثال مطرح می شود. ساختار پایه ای جایگزین مطالب به شرح زیر است :

templates/ : این پوشه اصلی قالب است که تمام قالب های نصب شده روی سایت را شامل می شود.

beez/ : این پوشه قالب beez است که فایل های قالب در آن قرار دارد.

html/ : این پوشه html داخل پوشه beez است.

com_content/ : نام این پوشه منطبق بر نامه کامپوننتی است که می خواهید آن را جایگزین کنید.(در این مثال com_content کامپوننتی است که خروجی و نحوه نمایش محتوا را کنترل می کند)

articles/ : این پوشه شامل فایل هایی است که نحوه نمایش محتوا را کنترل می کنند.

default.php : در واقع اصل عملیات جایگزینی را این فایل انجام می دهد زیرا این فایل کدهایی را شامل می شود که نحوه نمایش یک مطلب در حالت پیش فرض را مشخص می کنند.

form.php : در واقع اصل عملیات جایگزینی را این فایل انجام می دهد زیرا این فایل کدهایی را شامل می شود که نحوه نمایش فرم ارسال در یک مطلب را مشخص می کنند.



اغلب انجمن های قالب های جوملا بسته های جایگزینی خاص خود را برای قالب هایشان ارائه می دهند و اکثر قالب های تجاری شامل انواع مختلف جایگزینی ها هستند . از آنجا که جوملا یک نرم افزار متن باز است شما می توانید جایگزین های خاص خود را ایجاد کرده و به هریک از قالب های جوملا اضافه کنید. به این ترتیب شما می توانید ظاهر سایت خود را کنترل کنید.

نتیجه گیری

مبحث قالب های جوملا بسیار پیچیده است و آنچه در این بخش تنها بخش کوچکی از آنچه می توان درباره قالب ها بیان کرد شرح داده شد. انجمن template در http://forum.joomla.org فروم و انجمن فعالی است که هر ماه صد ها سوال درباره XHTML, HTML, PHP, و CSS در آن پرسیده شده و پاسخ داده می شود.اگرچه ایجاد یک قالب در ابتدا ممکن است سخت و دلهره آور باشد اما هزاران قالب وجود دارد که می توانید هریک از آنها را انتخاب کنید از جمله قالب های رایگانی که در انجمن های مختلف معرفی می شوند , قالب های تجاری که توسعه دهندگان مختلف ارائه می کنند و یا قالب هایی که توسط کاربران جوملا ایجاد شده و در انجمن ها ی مختلف به اشتراک گذاشته می شود .هزاران صفحه نیز برای آموزش ایجاد صفحات وب وجود دارد . همچنین می توانید از طرح های CSS/HTML استفاده کرده و قالب مورد نظر خود را ایجاد کنید سپس با تبدیل آن به یک فایل php و افزودن دستورات jdoc به آن در جایی که می خواهید محتوا نمایش داده شود, طرح مورد نظر را با جوملا سازگار کنید.

ارسال نظر