mohammad-hossein-miri
Mohammad Hossein Miri

درد و دل های یک برنامه نویس - وب سایت شخصی محمد حسین میری

بیشترین دانلودها
کامپوننت فروش کارت شارژ و پین کد 3029
سیستم رزرواسیون جوملا 1103
ماژول ورود به سایت جوملا 3 581
ماژول گلوبال نیوز جوملا 3 - قابلیت صفحه بندی 384
ماژول اسلایدر آکاردئونی - جوملا 2.5 208
تکنیک های موثر در طراحی قالب - جوملا 3

سلام
بنده تصمیم گرفته ام یک سری از روش ها و تکنیک های طراحی قالب رو که شاید کمتر در نت از آن صحبت شده در چند قسمت براتون آموزش بدم
این تکنیک ها و روش ها صرفا جهت بکار گیری در طراحی قالب هستند و بنده قبل از آموزش حتما یکبار انها را انجام داده ام , در حقیقت بیشتر از روی تجربه بنده می باشد تا ترجمه آموزش های انگلیسی ...
برای ادامه آموزش به ادامه مطلب رجوع کنید ... خب شروع می کنیم
تو اولین آموزش می خوام نحوه الحاق کردن یک فایل css یا js جدید رو بهتون بگم و در ادامه نحوه غیر فعال سازی فایل های css و js پیشفرض جوملا را آموزش بدم
تو جوملا 2.5 برای اینکه یک فایل خارجی سی اس اس یا جاوا اسکریپت رو به قالب تون اضافه کنید می بایست از کد زیر استفاده کنید
  1. $document = JFactory::getDocument();
  2. // add css
  3. $url = JURI::root."templates/".$this->template."example/YOUR_FILE.css";
  4. $document->addStyleSheet($url);
  5. // add script
  6. $url = JURI::root."templates/".$this->template."example/YOUR_FILE.js";
  7. $document->addScript($url);


اما در جوملا 3 پلت فرم ها تغییر کردند و برای اضافه نمودن فایل js یا همان جاوا اسکریپت خارجی به قالب باید از روش زیر اقدام کنید

  1. JHtml::script(JUri::base() . 'templates/custom/js/sample.js', true);


این روش یک خوبی بزرگ دارد آن هم این است که اگر فایل js شما به mootools وابسته است می توانید در پارامتر دوم مقدار true را وارد کنید تا جوملا mootools را هم بصورت پیشفرض به جوملا اضافه کند
پارامتر سوم را اگر روی true قرار بدید جوملا بصورت پیشفرض فایل شما را از پوشه media فراخوانی خواهد کرد
برای مثال کد زیر را در نظر بگیرید

  1. JHtml::script('com_search/search.js', false, true);


مسیری که جوملا دنبال فایل میگردد بصورت زیر می باشد

  1. JPATH_BASE/media/com_search/js/search.js


برای css هم به همین صورت است
برای مثال :

  1. JHtml::stylesheet('com_search/search.css', array(), true);


مسیری که جوملا برای فایل مورد نظر میگردد بصورت زیر می باشد

  1. JPATH_BASE/media/com_search/css/search.css


یا که می توانید بصورت مستقیم آدرس دهی کنید

  1. JHtml::stylesheet(JUri::base() . 'templates/custom/js/sample.js');


اضافه نمودن کدهای جاوا اسکریپت و سی اس اس بصورت Inline :
در جوملا و فایل PHP شما می توانید کدهای جاوا اسکریپت و css خود را به سایت اضافه کنید
این کار بسیار ساده می باشد , به کد های زیر دقت کنید

  1. $document = JFactory::getDocument();
  2.  
  3. // Add Javascript
  4. $document->addScriptDeclaration('
  5. window.event("domready", function() {
  6. alert("An inline JavaScript Declaration");
  7. });
  8. ');
  9.  
  10. // Add styles
  11. $style = 'body {'
  12. . 'background: #00ff00;'
  13. . 'color: rgb(0,0,255);'
  14. . '}';
  15. $document->addStyleDeclaration($style);


جوملا بصورت خودکار کدها را بالای صفحه و در جای مناسب خود قرار خواهد داد

اضافه نمودن تگ سفارشی (Custom Tag) :

در جوملا برای تگ های سفارشی می توانید از کد زیر استفاده کنید. زیرا اضافه نمودن هر نوع کدی که بصورت js یا css باشد بین تگ های <style> و یا <script> قرار میگیرد اما تگ های سفارشی ممکن است اصلا به این تگ ها نیازی نداشته باشند. مانند کد زیر :

  1. $stylelink = '<!--[if lte IE 6]>' ."\n";
  2. $stylelink .= '<link rel="stylesheet" href="../css/IEonly.css" />' ."\n";
  3. $stylelink .= '<![endif]-->' ."\n";
  4.  
  5. $document = JFactory::getDocument();
  6. $document->addCustomTag($stylelink);


همان طور که می توانید کد بالا برای مرورگر IE می باشد و با کمک تابع addCustomTag() آن را به جوملا اضافه نمودیم.

غیر فعال سازی فایل های خارجی پیشفرض جوملا :

شاید براتون پیش آمده باشه که مثلا بخواهید کتاب خانه JQuery (جی کوئری) ای که جوملا از آن استفاده می کند را غیر فعال کنید و کتاب خانه خودتان را جایگزین آن کنید و دلیل این کار هم می تونه عدم سازگار نسخه کتاب خانه هایی باشد که شما نیاز دارید
برای اینکار با یک دستور می توانید کتاب خانه پیشفرض جوملا را غیر فعال کنید و کتاب خانه ی خود را اضافه کنید (این آموزش برای همه کتاب خانه های پیشفرض جوملا کار می کند)
با کد زیر می توانید این کار رو انجام بدید :

  1. $doc = JFactory::getDocument();
  2.  
  3. // remove js
  4. unset($doc->_scripts[JURI::root(true) . '/media/system/js/mootools-more.js']);
  5.  
  6. // remove css
  7. unset($doc->_styleSheets[JURI::root(true) . '/media/system/css/mootree_rtl.css']);


با کمی مطالعه کد بالا متوجه خواهید شد که کد بعد از // remove js برای غیر فعال سازی فایل های جاوا اسکریپتی می باشد و کد بعد از // remove css برای غیر فعال سازی فایل های سی اس اس می باشد
کدهای بالا را می توانید در فایل index.php قالب تان اجرا کنید و نتیجه آن را ببینید.

امیدوارم لذت برده باشید
ارادت/

Mohammad Hossein Miri ©Copyright 2017