آموزش ایجاد یک قالب جوملا (ابتدایی)
زمان کنونی: ۹-۲۷-۱۳۹۷, ۰۹:۰۱ عصر
کاربران در حال بازدید این موضوع: 1 مهمان
نویسنده: nooshin88
آخرین ارسال: nooshin88
پاسخ: 1
بازدید: 819

ارسال پاسخ 
آموزش ایجاد یک قالب جوملا (ابتدایی)
۱۲-۲۲-۱۳۹۵, ۰۹:۲۳ صبح (آخرین ویرایش در این ارسال: ۱۲-۲۲-۱۳۹۵ ۰۹:۳۵ صبح، توسط nooshin88.)
ارسال: #1
آموزش ایجاد یک قالب جوملا (ابتدایی)
ما در این مقاله در نظر داریم نحوه ایجاد یک قالب جوملای بسیار ساده را به شما آموزش دهیم. روشن است برای این کار به یک سری فایل‌ها و کدهای اضافه نیاز دارید اما اصلا نگران نباشید ما در این آموزش تمامی کدهای مورد نیاز را برای شما فراهم کرده‌ایم. شما به راحتی می‌توانید آن‌ها را کپی کنید و بسته به نیاز خود آن‌ها را تغییر دهید.
سلسله مراتب ایجاد یک قالب جوملا

برای ایجاد یک قالب ابتدایی جوملا، در قدم اول شما باید یک پوشه با نامی مناسب برای قالب خود ایجاد کنید، همانند: mynewtemplate

در مرحله بعد با یک ویرایشگر متن دو فایل index.php و templateDetails.xml را ایجاد کنید. بهتر است برای حفظ نظم و ترتیب در قالب، دو پوشه با نام‌های css و images ایجاد کنید و فایل‌های css  و تصاویر خود را در آن‌ها قرار دهید. اکنون فایل css خود را (برای مثال template.css) ایجاد کنید و داخل پوشه css خود قرار دهید. درست است شما می‌توانید کدهای css خود را در داخل همان فایل index.php به همرا کدهای html خود قرار دهید اما بسیاری از طراحان وب ترجیح می‌دهند تا فایلی مجزا برای کدهای css خود درنظر بگیرند و با کمک یک تگ link در فایل index.php آن را فراخوانی کنند.
نمای کلی از ساختار فایل‌ها و پوشه‌های ما در این قالب به شکل زیر می‌باشد:
کد:
*mynewtemplate
**css/
***template.css
**images
**index.php
**templateDetails.xml

آماده سازی فایل templateDetails.xml

اکنون نوبت آماده‌سازی فایل templateDeatails.xml فرا رسیده‌است. این فایل یک فایل بسیار ضروری در قالب شما به حساب می‌آید تا جایی که بدون این فایل، قالب شما در محیط جوملا نمایش داده نخواهدشد. این فایل شامل متا دیتا‌های اصلی قالب شما است که محتویات آن ممکن است متناسب با ورژن جوملا تغییر کند.

برای جوملا با ورژن‌ ۲.۵ و ورژن‌های بالاتر از آن، ساختار زیر را بکار ببرید. فقط به یاد داشته‌باشید که قسمت "version="2.5 را متناسب با ورژن جوملای خود تغییر دهید.

کد:

mynewtemplate
 2008-05-01
 John Doe
 john@example.com
 http://www.example.com
John Doe 2008
GNU/GPL 1.0.2
My New Template
 
 index.php
templateDetails.xml
 images
 css

  breadcrumb  left right  top  user1 user2 user3  user4  footer

همان‌طور که مشاهده می‌کنید، در این فایل یک سری اطلاعات پایه درباره قالب شما با کمک تگ‌های مربوطه قرار داده‌شده‌اند. بهترین کار این است که شما این کدها را از این قسمت کپی کنید و در فایل templateDetails.xml خود قرار دهید در نهایت، اطلاعاتی همانند و را متناسب با اطلاعات خود تغییر دهید.
تگ شامل تمام پوشه‌هایی است که شما در قالب خود به آن‌ها نیاز دارید مانند پوشه‌های css و images اما چون در حال حاضر نسبت به تعداد و یا حتی نام‌ آن‌ها آگاهی ندارید، کافی است آن‌ها را از این قسمت کپی کنید و بعداً در صورت لزوم پوشه‌های دیگر را به این تگ اضافه کنید. بخش position در این فایل در واقع موقعیت‌های معمولی است که شما در قالب ابتدایی خود به آن‌ها نیاز دارید، بعداً می‌توانید به راحتی موقعیت‌های دیگر خود را به آن‌ها اضافه کنید.


آماده‌سازی فایل index.php

فایل index.php فایل اصلی قالب شما است. اساساً در این قسمت شما با صفحه‌ای همانند صفحه HTML مواجه خواهید بود با این تفاوت که هر جا نیاز به تبادل داده باشد می‌توانید مابین تگ‌های HTML خود، از کدهای PHP استفاده کنید. فایل index.php شما با اضافه کردن یکسری کد مربوط به موقعیت‌های ماژولها و کامپوننت‌ها کامل خواهد شد. 
در ادامه ما این کدها را به صورت کاملاً تفکیک شده برای شما توضیح خواهیم داد.

شروع

قالب جوملای شما با کدهای زیر آغاز خواهد شد:
کد:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>

 xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
- خط اول : مانع از شیطنت بعضی افراد جهت دسترسی به کدهای شما و سوء‌استفاده از آن‌ها می‌شود.
- خط دوم : به مرورگر بیان می‌کند سند شما از چه نوعی است. Html یا html5 و یا .... در کدهای بالا از DOCTYPE با ورژن ۵ استفاده شده است. این ورژن در عین سازگاری با ورژن‌های قبلی خود دارای امکانات و ويژگی‌های کاملتری می‌باشد. ممکن است شما در هر پروژه ای تصمیم بگیرید از ورژن‌های متفاوتی استفاده کنید و بهتر است بدانید در جوملای ۳ و ورژن‌های بعدی آن از DOCTYPE با ورژن ۵ استفاده می‌شود.
- خط سوم: در این قسمت مشخص می‌شود از چه زبانی در پروژه استفاده شده‌است.

کدهای بخش Html  از دو قسمت head و body تشکیل می‌شود. قسمت head آن شامل اطلاعاتی درباره این سند است و بخش body آن شامل کلیه کدهای کنترلی لایه‌های وب سایت شما می‌باشد.

HEAD
کد:





با کمک خط اول، اطلاعات هدر در این قسمت قرار خواهدگرفت. این اطلاعات می‌تواند شامل عنوان صفحه، اطلاعات متا و ... باشد. در ادامه‌ی این بخش از تگ‌های لینک برای فراخوانی دو فایل‌ css سیستمی یعنی system.css ، general.css و فایل css خودمان یعنی template.css استفاده شده‌است. به مسیرهای فراخوانی دقت کنید و آن‌ها را مطابق با پروژه و نام فولدر‌های خود تغییر دهید.

قسمت body

BODY

کد:
 


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

موقعیت‌های ماژولها


اگر دقت کرده‌باشید، در قسمت body از کدهای شما، در قسمت فراخوانی ماژول، name=top قرار گرفته‌است، در واقع  با این کار موقعیت top برای ماژول فراخوانی شده‌است و به جوملا اجازه می‌هد ماژول موردنظر را در این قسمت قرار دهد. بخش type=component معرفی بخش component شماست که شامل تمام مقالات و محتوای اصلی قالب شماست و عموما در وسط قالب قرار می‌گیرد.
توجه : شما می‌توانید خط مربوط به ماژول‌ها را درهرقسمتی از بدنه قالب خود قرار دهید اما حتماً توجه داشته باشد که با اضافه کردن این خط حتماً خط مربوط به موقعیت آن را در فایل templateDetails.xml خود قرار دهید.

در پایان:
یک خط و تمام
کد:
تصاویر دلخواه

برای اضافه کردن تصاویر دلخواه، به قالب خود، می‌توانید از دستور زیر استفاده کنید:
کد:
Custom image
در دستور بالا متغیر template با توجه به نام قالب شما تغییر خواهد کرد.


Css شخصی


شما می‌توانید فایل‌های css دلخواه خود را با کمک دستور زیر فراخوانی کنید:

[/code]

[/code]

توجه داشته‌باشد، هر فایلی که به قالب شما اضافه می‌شود حتماً باید در فایل templateDetails.xml فراخوانی شود مگر آنکه زیر مجموعه پوشه‌ای باشد که قبلاً فراخوانی شده‌است.
در نهایت فایل index.php شما بصورت زیر خواهد بود:
کد:
<?php defined('_JEXEC') or die('Restricted access');?>




 


فشرده کردن فایل قالب سایت جهت نصب

قالب خود را نصب کنید و از آن لذت ببرید. برای این‌ کار شما می‌بایست فایل قالب خود را به یکی از فرمت‌های زیر فشرده کنید.
.zip , .tar.gz, .tar.gz2
اکنون زمان آن فرا رسیده تا قالب خود را امتحان کنید.

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


Extensions -> Manage -> Install

choose file →upload & install


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

امضای nooshin88
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان

POWERED BY MyBB, © 1390-1397 گروه پیروان موعود
پشتیبانی و توسعه SaneCity