آموزش مرحله به مرحله ساخت و ایجاد قالب در جوملا
- توضیحات
- نوشته شده توسط نازنین دالوند
- دسته: مطالب جوملا
- بازدید: 533
در این جلسه آموزشی درباره نحوه ساخت و ایجاد قالب در جوملا سخن خواهیم گفت. این آموزش تمامی فایل ها و کدهای مورد نیاز برای ایجاد یک قالب اساسی را پوشش می دهد. کدهای مورد نیاز به صورت آماده ارائه شده است بنابراین می توان آن را کپی کرده و با ویرایش تا تغییر مختصری از آن ها استفاده کرد.
ساخت و ایجاد قالب
در زیر مراحل ساده ای برای مدیریت قالب ها در جوملا استفاده شده است -
- پوشه ای به نام MyFirstTemplate را در پوشه templates هاست خود ایجاد کنید. در داخل پوشه MyFirstTemplate ، دو پوشه دیگر به نام images و CSS ایجاد کنید تا تمام تصاویر و فایل های CSS را در آنجا ذخیره کنید.
- در داخل پوشه MyFirstTemplate ، فایلی را با عنوان templateDetails.xml ایجاد کنید ، بدون این فایل قالب در جوملا نمایش داده نمی شود. در نظر داشته باشید پرونده templateDetails.xml ضروری است. بدون آن ، قالب شما توسط جوملا دیده نمی شود. پرونده فوق متاداده های کلیدی را در مورد قالب دارد. سینتکس یا همان syntax (نحوه نگارش کلمات به صورت صحیح در زبان نویسی) برای هر نسخه جوملا متفاوت است.
templateDetails.xml
<?xml version = "1.0" encoding = "utf-8"?>
<extension version = "3.0" type = "template">
<name>Tutorials Point</name>
<creationDate>2015-06-13</creationDate>
<author>Tutorials Point</author>
<authorEmail>این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید</authorEmail>
<authorUrl>http://www.example.com </authorUrl>
<copyright>Jack 2015</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My First Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</extension>
جزئیات کد :
بنابراین ، همانطور که می بینید ، مجموعه ای از اطلاعات را بین تگ های نشانه گذاری شده داریم. بهترین رویکرد شما کپی و چسباندن این پرونده در فایل templateDetails.xml و تغییر بیت های مربوطه (مانند <neme> و <author> ) است.
- <files> - حاوی فایل ها و پوشه های موجود در پوشه MyFirstTemplate.
- <folder> - این کد حاوی دربرگیرنده تمامی پوشه های فایل MyFirstTemplate می باشد.
- پرونده index.php به هسته هر صفحه ای که جوملا ارائه می دهد تبدیل می شود. در اصل ، شما یک صفحه درست می کنید (مانند هر صفحه HTML) اما کد PHP را در جایی قرار دهید که محتوای سایت شما باید در آنجا باشد. قالب با اضافه کردن کد جوملا به موقعیت های ماژول و بخش های کامپوننت در قالب شما کار می کند. هر چیزی که به این قالب اضافه شود در همه صفحات ظاهر می شود مگر اینکه از طریق سیستم مدیریت محتوا جوملا (یا کد سفارشی) به یکی از این بخش ها اضافه شود.
index.php
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "<?php echo $this->language; ?>" lang = "<?php echo $this->language; ?>" > <head> <jdoc:include type = "head" /> <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/system.css" type = "text/css" /> <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/general.css" type = "text/css" /> <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" /> </head> <body> <jdoc:include type = "modules" name = "top" /> <jdoc:include type = "component" /> <jdoc:include type = "modules" name = "bottom" /> </body> </html> ?>
جزئیات کد
- ابتدا : خط اول این کد افرادی که قصد هک یا استفاده های مخرب دارند را به دنبال کد نویسی شما متوقف می کند. این کد (در واقع خط دوم یعنی DOCTYPE) مرورگر نشان می دهد که از کدام صفحه html استفاده می شود و در خط سوم با توصیف زبان مورد استفاده در وب سایت ، سند HTML را شروع می کند. خط سوم سند HTML ما را شروع می کند و توضیح می دهد که وب سایت در چه زبانی قرار دارد. یک سند html به دو بخش "head" و "body" تقسیم می شود. در این قسمت اطلاعات مربوط به سند وجود دارد و بدن حاوی كد وب سایت است كه طرح بندی را کنترل می كند.
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "<?php echo $this->language; ?>" lang = "<?php echo $this->language; ?>" >
- head : اولین خط جوملا را به شما می دهد که اطلاعات مربوط به عنوان صحیح را وارد کنید. این خط شامل عنوان صفحه ، اطلاعات متا و همچنین JavaScript سیستم می شود. مابقی لینک های ایجاد کننده مرتبط به صفحه بندی استایل سیستم و استایل شخصی می باشند. ( اگر از آن به عنوان pattern.css نامگذاری شده باشد و در پوشه css دایرکتوری قالب شما قرار دارد. بنابراین اگر قالب شما در http://www.mysite.com/templates/my_template/ قرار داشته باشد، فایل css شما به http://www.mysite.com/templates/my_template/css/ می رود.) - در واقع این خطوط برای لینک دادن به صفحه بندی های مختلف قالب در جوملا استفاده می شوند.
<head> <jdoc:include type = "head" /> <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/system.css" type = "text/css" /> <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/general.css" type = "text/css" /> <link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type = "text/css" /> </head>
- body : در اینجا در بخش بدنه ، از jdoc برای خروجی گرفتن از برخی قسمت های سیستم در جوملا استفاده شده است. از نام = "top" برای تنظیم منو در بالا استفاده می شود - در واقع باید اطمینان حاصل کنید که فهرست منوی شما در موقعیت ماژول "بالا" قرار دارد.
<body> <jdoc:include type = "modules" name = "top" /> <jdoc:include type = "component" /> <jdoc:include type = "modules" name = "bottom" /> </body>
موقعیت های ماژول
در بالا ، خطی که می گوید name = top یک موقعیت ماژول به نام بالا را اضافه می کند و به جوملا اجازه می دهد تا ماژول ها را در این بخش از قالب قرار دهد. خط type= component شامل کلیه مقالات و محتوای اصلی (در واقع ، کامپوننت ها) است و بسیار مهم است. در مرکز قالب قرار می گیرد.
توجه: شما می توانید خطوط ماژول خود را در هر جایی از بدنه مورد نظر خود اضافه کنید ، اما باید خط مربوطه را به فایل templateDetails.xml اضافه کنید که در کنار index.php از قالب شما قرار دارد.
- پس از ایجاد این دو فایل بالا در پوشه templates، وارد مدیریت قالب جوملا خود شوید و بر روی افزونه ها > مدیریت کلیک کنید. صفحه زیر نمایش داده می شود:
- در صفحه فوق ، بر روی "کاوش" کلیک کنید - می توانید به آدرس افزونه ها > مدیریت > کاوش مستقیما به این صفحه ورود کنید - صفحه زیر نمایش داده می شود:
- اکنون شما در صفحه بالا می توانید نام قالبی را که ساخته اید ببیند - در صورتی که هیچ گزینه ای برای شما به نمایش درنیامده است بر روی دکمه "جستجو" در بالای صفحه کلیک کنید - این نام را در تگ name در فایل templateDetails.xml می توانید مشاهده کنید. آن را انتخاب کنید (با زدن بر روی کادر سمت راست نام قالب) و بر روی دکمه "نصب" در بالای صفحه کلیک کنید. در این صورت یک پیام مانند شکل زیر برای شما به نمایش درمیایید:
- بعد از نصب قالب خود، می توانید با کلیک بر روی افزونه ها > قالب ها ، قالب ایجاد شده جدید خود را مشاهده کنید. خواهید دید که قالب ایجاد شده جدید مطابق شکل زیر در بین اسامی ذکر شده است:
- اگر همانند آموزش قبلی که به شما نشان دادیم "آموزش مدیریت و تنظیم کردن قالب در جوملا" وارد صفحه ویرایش قالب جدید شوید. پوشه هایی که در ابتدا این مبحث ایجاد کردید را می توانید مشاهده کنید:
نوار ابزار صفحه قالب ها : استایل ها
- پیش فرض : می توانید با انتخاب یکی از قالب های موجود در این صفحه و کلیک بر روی این دکمه، آن قالب را برای سایت خود به صورت پیش فرض در نظر بگیرید.
- ویرایش : اگر قصد ویرایش کردن یکی از قالب ها را دارید می توانید از این روش نیز استفاده کنید که با انتخاب آن قالب و کلیک بر روی این دکمه به صفحه ویرایش قالب بروید.
- کپی کردن : اگر قصد کپی کردن یکی از قالب ها را دارید می توانید از این روش استفاده کنید که با انتخاب آن قالب و کلیک بر روی این دکمه قالب را کپی کنید که قالب کپی شده با همان نام قالب قبلی و با پسوند 2 اضافه می شود ( برای مواقعی که می خواهید تغییراتی را در سایت انجام دهید و می خواهید به صورت آزمایشی ابتدا آن ها را امتحان کنید بسیار مفید می باشد.).
- حذف : اگر قصد حذف کردن یکی از قالب ها را دارید می توانید از این روش نیز استفاده کنید که با انتخاب آن قالب و کلیک بر روی این دکمه حذف براحتی قالب را حذف کنید.
بروزرسانی های این مطلب را دنبال می کنم
با عضویت در این سیستم ، آخرین بروزرسانی این مطلب یا محصول را مستقیم در ایمیل خود داشته باشید .
نام مطلب
: آموزش مرحله به مرحله ساخت و ایجاد قالب در جوملا
پیشنهاد میکنیم این مقالات را هم بخوانید
