تايپيك تبديل قالب هاي html به جوملا به صورت حرفه اي

[mojtaba031 14]

بسم الله رحمن رحيم

اين تايپيك براي آموزش كامل تبديل قالب هاي html به جوملا زده شده

به نظر من قشنگترين قالب ها مربوط به html هست كه مال جوملا نيس براي همين اين تايپيك را براي همگان زدم

ايشاالله كه اين تايپيك شما را راهنمايي كند

من هر روز اين آموزش را ادامه مي دم

از كليه دوستاني كه در اين رابط چيزي بلد هستند كمك كنند تا تايپيك جامع شود و بهتر

[mojtaba031 14]

ايزار هايي كه براي اول كار نياز داريد عبارت است از

1- يكي از برنامه هاي لوكال هاست مانند(WampServer)

2- يك از نسخه هاي جوملا كه من روي 2.5 كار مي كنم اما براي نسخه هاي ديگر وسط كارم ميگم

3- ++ NotePad

4- افزونه Firebug براي فاير فاكس

5- اگه به چيز ديگري نياز داشتيم وسط كار مي گم

ویرایش شده در اردیبهشت 91 توسط mojtaba031

[mojtaba031 14]

تهيه فايل هاي نصبي قالب هاي جوملا يكي از مهمترين قسمت هاي آموزش است كه من خودم اين فايل ها را براتون آماده كردم

--------------------فايل نصبي قالب هاي 2.5 جوملا----------------------------

--------------------فايل نصبي قالب هاي 1.5 جوملا----------------------------

اين فايل ها در ضميمه پست هست

******************************************************************************************

يك قالب html كه آموزشمون روي اون انجام بشه كه خودم اونم براتون گزاشتم شما مي تونيد از هر قالب ديگري استفاده كنيد و اگر در جاييش گير كرديد بگيد

قالب html در ضميمه پست وجود دارد

[irantechnic 10]

این آموزش هم خیلی کمکتون می کنه

منتها برای جوملا1.5 هستش

http://joomlaforum.ir/showthread.php/2089-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AA%D8%A8%D8%AF%DB%8C%D9%84-%D9%82%D8%A7%D9%84%D8%A8-html-%D8%A8%D9%87-%D9%82%D8%A7%D9%84%D8%A8-%D8%AC%D9%88%D9%85%D9%84%D8%A71.5

موفق باشید

[texima 13]

با سلام

آموزش عالی هست البته باید این توجه بشه که مطالبتون رو واضح بیان کنید و در حد امکان با زبان ساده:21: مرسی از شما

موفق باشی

[mojtaba031 14]

من تا مي تونم ساده حرف مي زنم تا همه متوجه بشند

تا اينجا را كه همه متوجه شديد

امشب ميام و بقيشو مي گم فعلا من رفتم سر درسام

با ارزوي موفقيت براي همه و مديران اين انجمن به خصوص ايشاالله

ویرایش شده در اردیبهشت 91 توسط mojtaba031

[mojtaba031 14]

*******************فايل نصبي جوملا 1.5*************************

<name>theme</name>

تو اين قسمت نام قالب خودتونو مي زاريد

<creationDate>1391/2012</creationDate>

تو اين قسمت تاريخ توليد آن

<author>مجتبي شفيع زاده</author>

تو اين قسمت نام طراح را مي زاريد

<authorEmail>TAKTAZPC@TAKTAZPC.IR</authorEmail>

اين قسمت ايميل طراح

<authorUrl>http://www.TAKTAZPC.IR</authorUrl>

اگر سايت هم داريد اين قسمت مي زاريد

<copyright>© copyright 1999-2020- TAKTAZPC</copyright>

كپي رايت قالب سايتتون

<license>GNU/GPL </license>

اينم ليسنس قالبتون

<version>1.0.2</version>

نسخه فالبتون تو اين قسمت قرار مي گيره

<description>طراحي قالب هاي سايت هاي جوملا</description>

تو اين قسمت هم توضيحاتي درباره قالب مي زاريد كه هنگام نصب قالب اون ها را نشون بهتون مي ده

<files>

</files>

با اين كد فايل هاي قالبتون را ميديد

*لازم به ذكر است كه كد زير در وسط اين دو كد قرار مي گيرد

<filename>index.php</filename>

با اين كد فايل ها را تعريف مي كنيد

<positions>

</positions>

با اين كد موقعيت هاي قالبتون را مي زاريد

*لازم ب ذكر است كه كد زير در وسط اين دو كد قرار مي گيرد

<position>right</position>

قرار گيري موقعيت هاي قالب با اين كد

<install>

</install>

اين دو كد براي نصب جوملاست كه يكي اول و دومي اخر كد قرار مي گيرد

* نكته 1: اگر فايلي را در اينجا تعريف كنيد و نباشد در پوشه نصبي قالب هنگام نصب بر روي جوملا خطا مي دهد

* نكته 2: تمام فايل هاي نياز يك قالب بايد حتما در قسمت كدها تعريف شود حتي اگه داخل پوشه باشد

ویرایش شده در اردیبهشت 91 توسط mojtaba031

[mojtaba031 14]

*******************فايل نصبي جوملا 2.5*************************

<name>theme</name>

تو اين قسمت نام قالب خودتونو مي زاريد

<creationDate>1391/2012</creationDate>

تو اين قسمت تاريخ توليد آن

<author>مجتبي شفيع زاده</author>

تو اين قسمت نام طراح را مي زاريد

<authorEmail>TAKTAZPC@TAKTAZPC.IR</authorEmail>

اين قسمت ايميل طراح

<authorUrl>http://www.TAKTAZPC.IR</authorUrl>

اگر سايت هم داريد اين قسمت مي زاريد

<copyright>© copyright 1999-2020- TAKTAZPC</copyright>

كپي رايت قالب سايتتون

<license>GNU/GPL </license>

اينم ليسنس قالبتون

<version>1.0.2</version>

نسخه فالبتون تو اين قسمت قرار مي گيره

<description>طراحي قالب هاي سايت هاي جوملا</description>

تو اين قسمت هم توضيحاتي درباره قالب مي زاريد كه هنگام نصب قالب اون ها را نشون بهتون مي ده

<files>

</files>

با اين كد فايل هاي قالبتون را ميديد

*لازم به ذكر است كه دو كد زير در وسط اين دو كد قرار مي گيرد

<filename>index.php</filename>

با اين كد فايل ها را تعريف مي كنيد

<folder>

</folder>

با اين كد فولدرهاي قالبو معرفي مي كنيد

<positions>

</positions>

با اين كد موقعيت هاي قالبتون را مي زاريد

*لازم ب ذكر است كه كد زير در وسط اين دو كد قرار مي گيرد

<position>right</position>

قرار گيري موقعيت هاي قالب با اين كد

<extension>

</extension>

اين دو كد براي نصب جوملاست كه يكي اول و دومي اخر كد قرار مي گيرد

* نكته 1: اگر فايلي را در اينجا تعريف كنيد و نباشد در پوشه نصبي قالب هنگام نصب بر روي جوملا خطا مي دهد

* نكته 2: تمام فايل هاي نياز يك قالب بايد حتما در قسمت كدها تعريف شود حتي اگه داخل پوشه باشد

* نكته 3: در جوملا 2.5 مي توانيد فولدرهاي قالب را معرفي كنيد با كدي كه دادم در اين صورت لازم نيس فايل هاي درون اون فولدر را تعريف نماييد

[mojtaba031 14]

در اينجال ما بايد فايل هاي اصلي قالب كه به صورت HTML هستند به PHP تبديل كنيم

براي اين كار آنها را در نوت پد ++ باز كرده و زبان برنامه نويسي آنهارا به PHP تغيير داده و ذخيره مي كنيم

يك كپي از فايل نصبي در پوشه قالب مي گزاريم

فايل نصبي قالب را باز كرده و فايل ها را به اين صورت وارد فايل نصبي مي كنيم

<filename>index.php</filename>

و به همين صورت

بيشتر در فايل index كار مي كنيم چون با دس كاري كد ها مي شه بقيه صفحات را در صفحه اصلي اورد

با توجه به مطالبي كه در پست قبل گفته شد بقيه فايل نصبي را كامل كنيد و ذخيره نماييد

حال يك فايل زيپ از پوشه قالب گرفته و در جوملا نصب مي كنيمش و به عنوان پيش فرض انتخاب مي كنيم

* فايل زيپ شده حتما بايد با زيپ ويندوز باشد نه با نرم افزارها مثل winrar

بعد از نصب قالب و پيش فرض قرار دادن آن قالب را ببينيد

همه چيز قالب هست اما هيچ عكسي نمايش داده نمي شه فقط متن هاي قالب هست

[texima 13]

با سلام

موفق باشی، مطالبت رو وارد کن برسم میام جمعشون میکنم یه فایل آموزشی ایجاد میکنم

:auizz3ffy9vla57584x

[mojtaba031 14]

خب براي اينكه تمام عكس ها و جاوا اسكريپ ها و فايل هاي ديگر يك قالب در قالب نمايش داده شوند از كد زير استفاده مي كنيم

templates/<?php echo $this->template ?>

اين كد را قبل از ادرس دهي فايل هاي جاوا، عكس ها و .. مي زاريم به شكل زير

مثلا من يك مثال در همين قالب خودمون مي زنم

********كد قالب قبل از قرار گيري كد جوملا*********

<li><img src="images/slide-title2.gif"><a href="#"><span><span>اطلاعات بیشتر</span></span></a></li>

<script type="text/javascript" src="js/maxheight.js"></script>

*********كد قالب بعد از قرار گيري كد جوملا********

<li><img src="templates/<?php echo $this->template ?>/images/slide-title2.gif"><a href="#"><span><span>اطلاعات بیشتر</span></span></a></li>

<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/maxheight.js"></script>

براي اينكه اين كارو كنيم فايل صفحه اصلي قالب را با نوت پد++ باز مي كنيم و اين كد را قرار مي دهيم در جاهاي خود وذخيره مي نماييم

بعد از اينكه اين كارو كرديم قالب را ببينيد اين بار همه ي قالب به درستي كار مي كند

[mojtaba031 14]

اگه مي خواهيد سرتيت سايت خود را با جوملا عوض كنيد بايد از يك كد استفاده كنيد

اين كد با كد تاتل يا سر تيت سايت كه در قسمت هد قالب وجود دارد عوض مي شه

بعد از قرارگيري كد با رفتن به هر صفحه اي از جوملا نام اون صفحه در سرتيت مرورگر نمايش داده مي شه

<jdoc:include type="head" />

بعد از تغييرات فايل قال را ذخيره و ببينيدش

[mojtaba031 14]

خب به قسمت مهم سايت رسيديم يعني اوردن منوهاي سايت

اين قسمت يكم پيچيدس پس حواسا خوب جمع باشه

براي اين كه يك منو اورده شود يا قرارش بديم در قالب از كد زير استفاده مي كنيم

<jdoc:include type="modules" name="menu" />

خب اين كد را با كد منوي بالا عوض مي كنيم مثلا در قالب خودمون با كد زير عوضش مي كنيم

<li class="current"><a href="index.html">خانه</a></li>

<li><a href="services.html">خدمات</a></li>

<li><a href="hosting.html">میزبانی وب</a></li>

<li><a href="solutions.html">مشاوره</a></li>

<li><a href="support.html">پشتیبانی</a></li>

<li><a href="contacts.html">تماس با ما</a></li>

اين كدها را در قال پاك مي كنيم و بجاش كدي كه مال جوملا است را قرار مي دهيم

خب دي اينجا يك كار ديگر بايد كنيم

بايد در فايل نصبي قالب نام منو را وارد كنيم مثلا در اينجا نام منو را در فايل نصبي به صورت زير وارد مي كنيم

<positions>

<position>menu</position>

</positions>

بعد ذخيره مي نمايم

نكته1 : در جوملا 1.5 بعد از تعريف نام منو در فايل نصبي منو در قالب مي آيد چون در تنظيمات منو در جوملا به صورت پيش فرض است *

نكته2 : در جوملا 2.5 بعد از تعريف نام منو در فايل نصبي بايد وارد جوملا شد وارد مدريت ماژول ها بعد وارد ماژول منوي اصلي و و موقعيت ماژول را نام منوي انتخابي *

مي گزاريم

ویرایش شده در اردیبهشت 91 توسط mojtaba031

[mojtaba031 14]

بچها منو ببخشيد كه تو اموزش اختلال ايجاد شد و دير بروزرساني شد

ویرایش شده در اردیبهشت 91 توسط mojtaba031

[mojtaba031 14]

براي اينكه منويي فعال يا غير فعالش كنيم مي توان از كد هاي زير استفاده كنيم

اين كدها بايد در بالا و پايين كدهاي منو قرار بگيرد

اين كد در بالاي كد ها اضافه مي شود

<? : (('php if($this->countModules('right?>

اين كد در پايين كدها

<? ;endif ?>

مثال در قال خودمون و پست قبلي:

در پست قبلي بعد از اينكه كد جوملا را بجاي اون كدهاي html گزاشتيم

اين دو كدم در قبل و بعدش مي زاريم

<? : (('php if($this->countModules('right?>

<jdoc:include type="modules" name="menu" />

<? ;endif ?>

با اين كار اگر منويي را در مدريت جوملا غير فعال كرديم باعث ميشه اون منو در قالب نمايش داده نشود

ویرایش شده در اردیبهشت 91 توسط mojtaba031

[ahora 10]

سپاس. خواهش میکنم ادامه بدین آموزش رو کامل کامل بشه

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

ویرایش شده در خرداد 91 توسط ahora
پیشنهاد

[amirali0001 13]

واقعا دستت درد نکنه

منم یه پیشنهاد دارم برین تا میتونید css یاد بگیرید بعد شم از صفر قالب زدن زیاد لذت بخش نیست یه قالب خوب رایکان انتخاب کنید و شروع کنید به تغییرش

[ahora 10]

خب براي اينكه تمام عكس ها و جاوا اسكريپ ها و فايل هاي ديگر يك قالب در قالب نمايش داده شوند از كد زير استفاده مي كنيم

templates/<?php echo $this->template ?>

اين كد را قبل از ادرس دهي فايل هاي جاوا، عكس ها و .. مي زاريم به شكل زير

مثلا من يك مثال در همين قالب خودمون مي زنم

********كد قالب قبل از قرار گيري كد جوملا*********

<li><img src="images/slide-title2.gif"><a href="#"><span><span>اطلاعات بیشتر</span></span></a></li>

<script type="text/javascript" src="js/maxheight.js"></script>

*********كد قالب بعد از قرار گيري كد جوملا********

<li><img src="templates/<?php echo $this->template ?>/images/slide-title2.gif"><a href="#"><span><span>اطلاعات بیشتر</span></span></a></li>

<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/maxheight.js"></script>

براي اينكه اين كارو كنيم فايل صفحه اصلي قالب را با نوت پد++ باز مي كنيم و اين كد را قرار مي دهيم در جاهاي خود وذخيره مي نماييم

بعد از اينكه اين كارو كرديم قالب را ببينيد اين بار همه ي قالب به درستي كار مي كند

آقا مجتبی یه پرسش در اینباره

بنده آدرس رو تغییر دادم و به css و فایل عکس لوگو اعمال کردم. همه ی عکسها میاد غیر از لوگو. قالبی رو که دارم روش کار میکنم این هست که پیوست میکنم.

لطفا راهنماییم کنید.

ضمن اینکه اگر ممکنه یه توضیح هم درباره ی این خط کد بدین.

templates/<?php echo $this->template ?>

اولش رو فهمیدم آدرس پوشه تمپلت هست اما دستور چاپ کردن

this->template رو نفهمیدم. اگر یه توضیح روان برای یه آدم مبتدی و همچنین کندذهنی چون بنده بدین سپاسگزار میشم.

[ATTACH]1683[/ATTACH]

[mojtaba031 14]

سلام به تمام كاربران انجمن

ديدم كه كاربران انجمن در اين اموزش در تمام كدها در نوشتن انها در انجمن به خصوص خودم اشكال پيش مياد

برا همين سري اول كدها را براتون در يك فايل اماده كردم و برا دانلود گزاشتم

فايل به صورت پي اچ پي است ان ر در نوت پد باز كنيد

فايل در ضميمه پست

***************************************

[mojtaba031 14]

دوست عزيز قالب شما را ديدم

شما بايد اول آن را به صورت php در بياريد و تغييرات را در فايل پي اچ پي انجام بديد

من اينجا ديدم اگه كدي در تبديل اشتباه قرار بگيره قالب خراب ميشه براي همين خودم لازم ديدم فايلي از كدها براتون بزارم

ان را دانلود و طبق اموزش بريد جلو تا از مسافرت بيام و ادامش بدم

اگه نشد خودم براتون اين كارا مي كنم

[ahora 10]

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

[saber.rajab 10]

سلام

خسته نباشید

خدا خیرتون بده

ادامه نمیدین؟

[blazhel 16]

سلام دوستان

یک نکته تو اموزشتون فراموش شده اینم اینه

<? : (('php if($this->countModules('right?>

<jdoc:include type="modules" name="menu" />

<? ;endif ?>

شما اسم موقعیت رو گزاشتین menu بعد تو شرطی سازی گزاشتین right

درستش به این صورته

<? : (('php if($this->countModules('menu?>

<jdoc:include type="modules" name="menu" />

<? ;endif ?>

[jahans 11]

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

امیدوارم که به زودی کارهای خوبی رو از کاربرا توی انجمن ببینیم

اگر بچه ها به طور مداوم از این آموزشها برای کاربران قرار بدن میتونیم کارهای بیشتر و بهتری رو ارائه بدیم .

بازم ازتون تشکر می کنم.

[minarigi 10]

سلام ممنون بخاطر اموزش زیباتون

ی مشکل داشتم اونم اینکه

من در فایل css خودم در قسمت body یک background-imag e گذاشتم ک یه عکس به پوشه images من مراجعه میکنه اما همین قسمت کارم میلنگه ممنون میشم اگ بتوننین کمکم کنین ک باید چ کنم:21:نشون نمیده