mahdi71

آموزش : راست چین کردن قالبهای جوملا

33 پست در این موضوع

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

امروزه با گسترش استفاده از سیستم مدیریت محتوای جوملا تعداد طراحان و مدیرانی که سیستم مدیریت محتوای جوملا را به عنوان وب سایت خود انتخاب میکنند به صورت روز افزون در حال رشد است. همانطور که مستحضر هستید جوملا یک سیستم Open Source است یعنی ما قادر خواهیم که منابع رایگان و تجاری این سیستم مدیریت محتوا در سطح وسیعی استفاده کنیم . یکی از کاربردی ترین , مهم ترین افزونه های جوملا که در واقع مشخص کننده شکل ظاهری سایت است قالب (template) است.

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

LTR چیست ؟

LTR مخفف عبارت Left To Right است. برخی از زبانها مانند زبان انگلیسی زبان فرانسه از چپ به راست خوانده میشوند. ویژگی صفحات وب که به این زبانهای LTR ایجاد شده اند اینست که همه اجزا (مانند منوها و عناوین و برچسب ها و نوشته) برعکس زبان ها RTL است . در واقع قالب LTR همان قالبی است که دانلود کردیم که در زبانهای راست به چپ قابل استفاده نیست .

RTL چیست ؟

RTL مخفف عبارت Right To Left است. برخی از زبانها مانند زبان پارسی و عربی و ... از راست به چپ خوانده میشوند مانند همین صفحه که ابتدای تمام اجزا (منوها , نوشته ها و ...) از سمت راست و انتهای آنها در سمت چپ است . قالب RTL همان قالبی است که برای زبانها راست به چپ سودمند است .

هدف از ارائه این مقاله تبدیل Template های LTR به RTL است و توانایی تبدیل آنها به یکدیگر است.

قبل از هر اقدامی باید از یک نسخه فارسی جوملا استفاده کنیم یا یک package فارسی ساز برروی نسخه انگلیسی نصب کنیم. و از مدیریت زبانها در جوملا زبان پیش فرض سایت را فارسی set کنیم.

قدم اول , فایلهایی که باید ویرایش کنیم

فایل index.php قالب

فایل index.php استخوان بندی و ساختار قالبهای جوملا را مشخص میکند. برای ویرایش آن باید HTML و کمی هم PHP بدانیم . کاری که باید برروی فایل index.php یک قالب LTR انجام دهیم اینست که کد

<?php if($this->direction == 'rtl') : ?>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template_rtl.css" rel="stylesheet" type="text/css" />
<?php else: ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
<?php endif; ?>

به انتهای تگ headیعنی قبل از بسته شد آن اضافه کنیم . این تکه کد مشخص میکند اگر در مدیریت جوملا زبان پیش فرض سایت فارسی انتخاب شد سیستم جوملا فایل template_rtl.cssرا مورد استفاده قرار دهد و اگر انگلیسی انتخاب شد فایل template.css را مورد استفاده قرار دهد.

فایلهای css قالب

قالبهای جوملا عمدتا از یک فایل css به نام template.css استفاده میکنند برخی از قالبها از فایلهای css بیشتری استفاده میکنند که مسلما برای تبدیل کردن آن قالب ها به یک قالب راست چین باید تمام این css هارا ویرایش کنیم. وقتی قرار باید یک قالب LTR را به RTL تبدیل کنیم باید در ابتدا یک کپی از فایل template.css بگیریم و نام آنرا template_rtl.css بگذاریم . در این مقاله هر کجا که قرار شد دستوری به css اضافه کنیم یا css را ویرایش کنیم منظورمان ویرایش فایل template_rtl.css است .

قدم دوم , دستور مشخص کننده راست چین یا چپ چین بودن

دستور مشخص کننده راست چین یا چپ چین بودن در CSS دستور direction است. که به صورت زیر مورد استفاده قرار میگیرد.

body{
direction : rtl;
    }

راهنما : منظور ما از element در این مقاله عنصر html که در این مثال body - منظور ما از property در این مقاله یک استایل css که در این مثال direction - منظور ما از value در این مقاله مقدار (value) برای استایلها که در این مثال rtl میباشد.

اما اگر به منظور راست کردن کردن یک قالب چپ چین(LTR) این دستور direction را به یک قالب LTR اضافه کنیم به احتمال زیاد صفحه scroll میخورد (در عرض , scroll در طول طبیعی است) و این اصلا اتفاق خوبی نیست راه حل اینست که در صورت scroll شدن صفحه (در عرض) باید این دستور را از body حذف کرد به علاوه چند دستور css دیگر که در قدم های بعدی به آنها خواهیم پرداخت به عناصر صفحه اضافه کنیم. در صورتی که توانایی که با ابزار fire bug را دارید این توانایی در مراحل بعدی کمک زیادی به شما خواهد کرد.

قدم سوم , عنوان ماژولها و text-align ها

عنصر h3(در HTML) عنوان تمام ماژول ها در قالبهای جوملا است. این به معنی است که اگر ما تصمیم داریم تمام عنوانها را راست چین کنیم باید در css دستور

h3 {
text-align:right;
}

را اضافه کنیم .

یک نکته در ویرایش css ها , ممکن است در فایل css خود h3 از قبل دارای property هایی باشد اگر مابین آن propertyها

text-align:left;

یا هر چیزی دیگری بود فقط کافیست (value)مقدار left را به right تبدیل کنیم . اما اگر مابین propertyها;text-align:right اصلا وجود نداشت ما فقط عبارت ";text-align:right" را به انتهای property های h3 اضافه میکنیم و{} h3 را دیگر اضافه نخواهیم کرد.

قدم چهارم , عناصری که بیشتر مورد استفاده قرار میگیرند

برای هریک از این از element ها باید جدا گانه(مثلا input به تنهایی و label به تنهایی و ...) در فایل template_rtl.css جستجو (کلید f3) کنیم اگر هر کدام از عناصر دارای property بود این دو خصوصیت را به خصوصیتهای قبلی آنها اضافه میکنیم یا اگر این 2 خصوصیت را داشت ولی مقدارش فرق میکرد value آنها را تغییر میدهیم .

input, button, select, td, th, a, label	, p , span , ul , div {
direction:rtl;
text-align:right;
}

قدم پنجم , بررسی و تغییر padding و margin

margin و padding به چند شکل میتوانند مورد استفاده قرار گیرند ما فقط موارد زیر را مورد بررسی قرار خواهیم داد یعنی باید در فایل template_rtl.css عبارات " margin-left " و " padding-left " و " margin-right " و " padding-right " را جستجو کنیم و تمام موارد پیدا شده را برعکس کنیم به ترتیب تبدیل به " margin-right " و " padding-right " و " margin-left " و " padding-left " کنیم.

دقت کنید اگر جستجو شما نتیجه ای در بر نداشت عبارات " margin " و " padding " هریک را به طور جدا گانه جستجو کنید .ممکن است برای این propertyها با مقادیری همچون

padding : 12px 8px 13px 9px;
margin : 12px 8px 13px 9px;

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

margin : TOP RIGHT BOTTOM LEFT;
padding : TOP RIGHT BOTTOM LEFT;

یعنی هر عددی که به جای RIGHT قرار گیرد بیانگر مقدار padding-right یا margin-right و هر عددی که ... به همین صورت برای TOP , BOTTOM و LEFT .

بنابراین مقادیری که به جای RIGHT و LEFT نوشته شده اند باید بایکدیگر جابجا شوند.

نکته : ممکن است در فایلهای css با دستوراتی همچون

margin : 10px 15px;
padding : 10px 15px;

رو به رو شویم یعنی margin و padding هایی که 2تا مقدار دارند چون در این دستورات مقدار چپ و راست باهم برابرند نیازی به تغییر آنها نیست .

دقت کنید(در این مرحله و مراحل قبل) بجای اعداد ( مثلا 10pxو 15px ) هر عددی میتوند باشد .

قدم ششم , بررسی و ویرایش float ها

در css ها باید خصوصیت های

float:left;

را جستجو کنیم و هر موردی که پیدا کردیم تبدیل به

float:right;

کنیم .سپس در این مرحله بایددر فایلهای css بدنبال

left: هرعددی;

و آنرا تبدیل به

right: هرعددی;

کنید.

بعد از اتمام این مراحل باید ممکن برخی از عکسها نیاز به ویرایش داشته باشند. که میتوانید با photoshop با استفاده از امکانات rotate این کارا انجام دهید.

منبع:جوملای فارسی

ویرایش شده در توسط mahdi71

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

لطفا از ارسال های کپی شده از سایت های مختلف جدا پرهیز کنید.

امتیاز منفی لحاظ گردید.

Share this post


Link to post
Share on other sites
با سلام و احترام

دوست عزیز من که منبع رو ذکر کردم !!؟

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

در مواردی که سوالی برای کاربری پیش میاد می تونید لینکی به مطلب مورد نظر در سایت دیگر ارجاع دهید. (البته لینک ها بررسی میشوند که مصداق Black Link نباشند، در غیر این صورت حذف می گردند.)

ولی اگر مطلبی رو ترجمه کنید، انتشار ترجمه ی آن با ذکر منبع لاتین بلامانع است. (البته اگر ترجمه با قانون نشر و کپی رایت مشکلی نداشته باشد.)

پیروز باشید

Share this post


Link to post
Share on other sites

دوست عزیز من که این چیزهایی شما توضیح دادین رو هیچ کودوم رو تو قالب خودم پیدا نکردم

Share this post


Link to post
Share on other sites

با سلام و عرض تبریک به جهت پیوستن به گروه جوملاایران.

اسم قالبتون چیه دوست عزیز؟

دمو بذارید تا راهنمایی تون کنیم...

Share this post


Link to post
Share on other sites

دوست عزیز تمام موارد ذکر شده را می توانید داخل فولدر css و فایل های داخل اون بیابید.

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

با درود

1-چطور میتوانم زبان فارسی را به کنترل پنل اضافه کنم؟ توی language management فارسی نداره

2- فایل index.php قالب من اصلا شبیه به موردی که توی آین آموزش اومده نیست.

برای راست چین کردن قالب باید چیکار کرد؟

من از قالب site shaper و جوملا فارسی 2.5 امیرکبیر استفاده میکنم.

توی index.php فقط اینها را نوشته:

<?php

/**

* @package Joomla.Site

* @copyright Copyright © 2005 - 2012 Open Source Matters, Inc. All rights reserved.

* @license GNU General Public License version 2 or later; see LICENSE.txt

*/

// Set flag that this is a parent file.

define('_JEXEC', 1);

define('DS', DIRECTORY_SEPARATOR);

if (file_exists(dirname(__FILE__) . '/defines.php')) {

include_once dirname(__FILE__) . '/defines.php';

}

if (!defined('_JDEFINES')) {

define('JPATH_BASE', dirname(__FILE__));

require_once JPATH_BASE.'/includes/defines.php';

}

require_once JPATH_BASE.'/includes/framework.php';

// Mark afterLoad in the profiler.

JDEBUG ? $_PROFILER->mark('afterLoad') : null;

// Instantiate the application.

$app = JFactory::getApplication('site');

// Initialise the application.

$app->initialise();

// Mark afterIntialise in the profiler.

JDEBUG ? $_PROFILER->mark('afterInitialise') : null;

// Route the application.

$app->route();

// Mark afterRoute in the profiler.

JDEBUG ? $_PROFILER->mark('afterRoute') : null;

// Dispatch the application.

$app->dispatch();

// Mark afterDispatch in the profiler.

JDEBUG ? $_PROFILER->mark('afterDispatch') : null;

// Render the application.

$app->render();

// Mark afterRender in the profiler.

JDEBUG ? $_PROFILER->mark('afterRender') : null;

// Return the response.

echo $app;

با سپاس

ویرایش شده در توسط mrd90550

Share this post


Link to post
Share on other sites

یه قالب انگلیسی که ارزش فارسی سازی داشته باشه..بگذارید تا ببینم می تونم فارسیش کنم؟!!ممنون

رایگان می ذارم داخل فروم تا همه استفاده کنن!

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

..............ویرایش شد........

ویرایش شده در توسط bahrambaba

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

یه قالب انگلیسی که ارزش فارسی سازی داشته باشه..بگذارید تا ببینم می تونم فارسیش کنم؟!!ممنون

رایگان می ذارم داخل فروم تا همه استفاده کنن!

سلام قالب انگلیسی زیاده جستجو کنید خود انجمن هم بخش قالبهای انگلیسی سر بزنید و برای آموزش و یادگیری روی یکیشون کار کنید

http://joomlaforum.ir/showthread.php/2017-3%D9%82%D8%A7%D9%84%D8%A8-%D8%A7%D9%86%DA%AF%D9%84%DB%8C%D8%B3%DB%8C-2.5-%D9%88-1.7

ویرایش شده در توسط saber

Share this post


Link to post
Share on other sites

من یک قالب دارم که علاوه بر فایل template.css فایل های css زیاد دیگه ای هم داره ، توی پوشه های دیگه هم باز فایل css هست،میخوام بدونم برای راست چین کردن قالب باید تمام مراحل 2 تا 6 باید برای هر کدوم انجام بدم؟؟

2- فایل index قالب من تماما دستورات php داره یعنی تگ <head></head> نداره من باید خودم این تگ رو بذارمو دستور راستچینو اینجا بنویسم؟(لطفا زود زود جواب بدین- ممنون)

Share this post


Link to post
Share on other sites

برای راست چین کردن باید کاملا با Css آشنا باشین. هیچ نسخه ی از پیش نوشته شده ی کاملی وجود نداره چون هر قالبی با قالب دیگه متفاوته.

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

Share this post


Link to post
Share on other sites

ممنون اما با فایر باگ بیشتر طول میکشه . من بیشتر رو قسمت دوم سوالم مشکل دارم. توی فایل index که باید تگ <link rel="stylesheet> باشه نیست و تگ headerهم نیست من کجا باید بگم اگه سایت فارسی شد بیا فایل template_rtl.css رو بخون؟

Share this post


Link to post
Share on other sites

سلام

شما نام قالبتون رو بگید یا دمو ازش بذارید شاید خود قالبتون از rtl پشتیبانی کنه در اینصورت نیازی به راست چین نباشه اینجوری دوستان بهتر میتونن راهنمایی کنن....

Share this post


Link to post
Share on other sites
ممنون اما با فایر باگ بیشتر طول میکشه . من بیشتر رو قسمت دوم سوالم مشکل دارم. توی فایل index که باید تگ <link rel="stylesheet> باشه نیست و تگ headerهم نیست من کجا باید بگم اگه سایت فارسی شد بیا فایل template_rtl.css رو بخون؟

فایل ایندکس قالب های مختلف با هم فرق داره. بصورت معمول، در فایل ایندکس تو ابع فراخوانی میشن، فایل های دیگه که شامل بخش های مورد نظر شمان هم فراخوانی میشن.

شما زبان فارسی رو روی جوملاتون نصب کنید. و برای نمایش سایت زبان فارسی رو پیش فرض قرار بدید. قالب های 2010 به بعد اغلب شرکت ها بصورت خودکار با این کار RTL میشن.

در مورد سوالی هم که پرسیدید سایت از کجا بفهمه زبان فارسیه و rtl-scc رو لود کنه از این کد و کدهای مشابه دیگه میتونید استفاده کنید.

if ($config->get('direction') == 'rtl') { $this->warp->stylesheets->add('template:css/rtl.css'); }

اگه اسم قالب رو بگید بهتر بهتون کمک میشه.

این کد رو میتونید د ر index قالب بذارید. اگه جواب نگرفتید باید در فایل مناسب قرار بدید

Share this post


Link to post
Share on other sites

قالب شما تجاری هستش برای قالبهای تجاری فقط دمو بذارید گداشتن لینک دانلود قالبهای تجاری ممنوع هستش...

برای راست چین شدنش توی فایل style1.css خط 13 کلاس مربوط به body این رو اضافه کنید برای style های دیگه هم همین کار رو بکنید...

direction: rtl;

در فایل joomla.css هم خط 320 float: left رو به float:right تغییر بدین...

Share this post


Link to post
Share on other sites

2 تا سوال دارم:

1- یعنی با این کار که شما گفتین دیگه لازم نیست یه کپی از فایل template.css بگیرم و مراحل فارسی کردنو انجام بدم؟

2- سایت من دو زبانه هستش ، برای اینکه هم چپ چین داشته باشم هم راست چین چیکار باید کنم؟

Share this post


Link to post
Share on other sites

اگه برای سایت دو زبانه میخواین باید یه فایل template_rtl.css داشته باشین تا با انتخاب هر زبانی نوع چینش اون زبان هم به سایتتون اعمال بشه..

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

فایل joomla.cssخط 320 همچین کدی نداره که تغییر بدم؟

من اینو تو پست قبلی هم گفتم فایل index من اصلا تگ <header></header> و <""=link rel="stylesheet" href> نداره که مسیر فایل templat_rtl رو بدم؟

ویرایش شده در توسط hosseini_z

Share this post


Link to post
Share on other sites

با تشکر از راهنمایی شما، گذاشتن direction: rtl; در body کار درستی نیست چون باعث نمایش اسکرول بار در سمت چپ در مرورگر اینترنت اکسپلورر میشه که کار استانداردی هم نیست

Share this post


Link to post
Share on other sites

من تمام کارهایی رو که برای راستچین کردن بود رو فایل هایcss. انجام دادم اما خیلی از جاهاش تغییری نکرد.مثلا جای عکس هنوز همون طرف چپه- چیکار باید کنم/؟

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری