loading...
کد های کاربردی سایت , گرافیک رایانه , CG, animation, cinema 4d, after effect , photoshap ,فوتوشاپ, افتر افکت,سینما فردی,انیمیشن 2 بعدی و سه بعدی , اموزش , دانلود رای
آخرین ارسال های انجمن
hekmati بازدید : 6171 دوشنبه 30 تیر 1393 نظرات (31)

 

psd-to-html

 

به درخواست دوستان این اموزش حرفه ای به روش ساده رو براتون میزارم 

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

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

من یک شرح مختصر از قسمت های اونو میگم:

 

قسمت 1 تا 5 اموزش کامل طراحی قالب psd هست

قسمت 6  اموزش نصب شبیه ساز هاست و وردپرس

قسمت 7 تا 18 اموزش تبدیل psd به html

قسمت 19 تا 24 اموزش تبدیل قالب اچ تی ام ال به ورد پرس هست

 

­­وردپرس چیست؟

وردپرس(WordPress) یک Content Management System یا به اختصار CMS که به معنی سیستم مدیریت محتوا است،می باشد.وردپرس در کل یک نرم افزار تحت وب می باشد که برای ایجاد یک ویلاگ زیبا و قدرتمند مورد استفاده قرار می گیرد.وردپرس(WordPress) با زبان php نوشته شده و جهت ذخیره داده ها از بانک  اطلاعاتی MySQL استفاده می کند.از سیستم های مدیریت محتوا می توان دروپال،جوملا و … را نام برد.در این بخش قصد مقایسه کردن سیستم های مدیریت محتوا را نداریم ولی هر کدام مزیت و معایب خاص خود را دارند.مزیت سیستم وردپرس راحتی،سرعت و افزونه های قدرتمند آن است که در ادامه آموزش و البته کار با این سیستم شما هم متوجه خواهید شد….

درباره پوسته وردپرس!

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

style.css index.php single.php archive.php searchform.php search.php 404.php comments.php footer.php header.php sidebar.php page.php

شکل ظاهری پوسته !

شکل زیر ظاهر ساده پوسته وردپرس را تشکیل می دهد.شما می توانید شکل ظاهری و نحوه چیدمان بخش های قالب را تغییر دهید.تغییرات بستگی به سلیقه شما دارد.ما در این آموزش قصد ساخت قالب با دو ستون را داریم .در بخش هدر یا header لوگوی سایت به همراه نام سایت قرار می گیرد در بخش ستون،منوی ها قرار می گیرند.در بخش محتوا یا content تمام نوشته ها و مطالب شما قرار می گیرند و در بخش فوتر یا footer شما می توانید اطلاعات مربوط به طراح و … را قرار دهید.

 

ابزار لازم برای طراحی پوسته وردپرس چیست؟

برای داشتن یک قالب گرافیکی و زیبا باید از نرم افزار photoshop CS5 کمک گرفت.برای کدنویسی و تبدیل قالب خود ما باید کمی از زبان HTML و CSS آگاه باشیم.من سعی می کنم که در این آموزش تمام نکات مربوطه را به شما یاد دهم.برای نوشتن کدهای HTML و CSS من از نرم افزار DreamWeaver CS5 استفاده می کنم.بعد از طراحی قالب وردپرس و تبدیل آن به یک فایل HTML باید آن را تست کنیم،تست کردن به این صورت هست که ما ابتدا به وسیله نرم افزار WampServer  نسخه ۲،سیستم خود را به یک سرور PHP تبدیل می کنیم که این سرور کار کامپایل کردن قالب ما را به عهده می گیرد.

 

 

***قسمت اول***

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

 

حجم فایل : ۲۳ مگابای

 

***قسمت دوم***

 

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

 

حجم فایل : ۴۸ مگابایت

 

***قسمت سوم***

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

 

حجم فایل : ۶۳ مگابایت

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

 

 

***قسمت چهارم***

 

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

 

حجم:۷۲ مگابایت

 

 

***قسمت پنجم***

 

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

 

حجم فیلم آموزشی : ۶۹ مگابایت

 

 

***قسمت ششم***

 

ر این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت ششم از این سری می باشد.در این قسمت به دانلود نرم افزار وردپرس می پردازیم و باید سیستم خود را به یک هاست لینوکس تبدیل کنیم.برای این کار از نرم افزری به نام wamp استفاده می کنیم.این نرم افزار به ما این امکان را می دهد که بتوانیم بدون نیاز به هاست واقعی به کدنویسی php بپردازیم.

 

حجم فایل : ۳۳ مگابایت

 

 

***قسمت هفتم***

 

در این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت هفتم از این سری می باشد.در این قسمت به معرفی نرم افزار دریم ویور(Dream Weaver) می پردازیم و یک سایت جدید ایجاد می کنیم.خمچنین با دستورات ساده html و css آشنا می شوید.

 

حجم فایل : ۳۳ مگابایت

 

 

***قسمت هشتم***

 

در این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت هشتم از این سری می باشد.در این قسمت فونت های مورد نیاز برای طراحی قالب رو با استفاده از خاصیت font face که یکی از جدید ترین خاصیت های css3 می باشد به سند خود اضافه می کنیم و منوی بالایی سایت را کد نویسی می کنیم.

 

حجم فایل : ۵۸ مگابایت

 

 

 

***قسمت نهم***

 

در این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت نهم از این سری می باشد.در این آموزش قسمت جستجو , لوگو و قسمت تبلیغات را نیز کدنویسی می کنیم.

 

حجم فایل : ۶۳ مگابایت

 

 

***قسمت دهم***

در این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت دهم از این سری می باشد.در این قسمت به کدنویسی قسمت منوی موضوعات می پردازیم.با کمک html تعدادی منو و زیر منو را ایجاد کردیم و با کمک css به آنها استایل دادیم.

 

حجم فیلم آموزشی : ۳۶ مگابایت

 

 

 

***قسمت یازدهم***

 

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

 

حجم فایل آموزشی : ۲۷ مگابایت

 

 

***قسمت دوازدهم***

 

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

 

حجم فایل آموزشی :۴۷ مگابایت

 

 

 

***قسمت سیزدهم***

 

در این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت سیزدهم از این سری می باشد.در این قسمت قالب رو به سه بخش تقسیم می کنیم(سه ستونه کردن قالب) .بعد از آن به کد نویسی بخش اسلایدر می پردازیم.

 

حجم فیلم آموزشی : ۸۷ مگابایت

 

 

***قسمت چهاردهم***

 

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

 

حجم فایل : ۴۷ مگابایت

 

 

***قسمت پانزدهم***

 

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

 

حجم فایل آموزشی : ۶۴ مگابایت

 

 

***قسمت شانزدهم***

 

در این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت شانزدهم از این سری می باشد.در این آموزش قسمت اسلایدشو رو تکمیل می کنیم و همین طور با افزونه firebug آشنا می شویم که به راحتی می توانیم با کمک این افزونه به کدهای html دسترسی پیدا کنیم و …

 

حجم فایل آموزشی : ۳۹ مگابایت

 

 

***قسمت هفدهم ***

 

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

 

حجم فایل آموزشی : ۵۴ مگابایت

 

 

***قسمت هجدهم ***

 

در این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت هجدهم از این سری می باشد.در این آموزش قسمت فوتر footer سایت را css و html می کنید.تا اینجای آموزش حدود ۸۰ درصد اسکلت بندی قالب رو به پایان می رسونیم و از قسمت های بعدی روی توابع کار می کنیم.

 

حجم فیلم آموزشی :۵۸ مگابایت

 

***قسمت نوزدهم ***

 


در این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت نوزدهم از این سری می باشد.در این آموزش وردپرس را روی wamp نصب می کنیم و قالب html را برای تکه تکه کردن به پوشه پوسته های وردپرس انتقال می دهیم،همینطور تابع های مربوط به قسمت هدر را قرار می دهیم.

 

حجم فیلم آموزشی :۷۴ مگابایت

 

***قسمت بیستم ***

 

در این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت بیستم از این سری می باشد.در این آموزش قسمت functions را به قالب اضافه می کنید و همینطور توابع بخش ستون های کناری و قسمت تب اسلایدر را درون قالب قرار می دهیم.

 

حجم فایل آموزشی‌: ۴۹ مگابایت

 

***قسمت بیست یکم ***

 

در این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت بیست و یکم از این سری می باشد.در این آموزش توابع قسمت محتوا یا همون content رو قرار می دهیم و همینطوربخش اسلایدشو قالب رو.

 

حجم فیلم آموزشی:۴۴ مگابایت

 

***قسمت بیست دوم ***

 

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

 

حجم فیلم آموزشی : ۴۷ مگابایت

 

***قسمت بیست سوم ***

 

در این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت بیست وسوم از این سری می باشد.در این آموزش قسمت page یا صفحات برگه ها  را اسلایس و کدنویسی می کنیم و همینطور قسمت ورود را تا ۵۰ درصد کامل می کنیم.

 

حجم فیلم آموزشی : ۴۶ مگابایت

 

 

 

 

***قسمت بیست چهارم    پایان ***

 

 

با سلام. به دلیل دیر آپدیت شدن سایت پوزش می طلبم  و امیدوارم این سری از آموزش ها هم تونسته باشه رضایت شما رو جلب کرده باشه.بعضی از قسمت ها رو توی این بخش ها قرار ندادم مثل ابزارک و … که اونها رو هم توی اینترنت سرچ کنید می تونید آموزش های زیادی رو پیدا کنید.

در این سری از آموزش ها به طراحی قالب وردپرس می پردازیم.این آموزش قسمت بیست و چهارم از این سری می باشد.در این آموزش قسمت ورود و عضویت کاربران را تکمیل می کنیم , صفحه ۴۰۴ را ایجاد می کنیم و …

حجم فیلم آموزش : ۲۷ مگابایت

 

 

توجه توجه :

دو روش برای دانلود دارید

روش اول:

تمامی فایل های زیر را باید با هم دانلود و سپس با برنامه WinRAR

فایل ها را خارج کنیدپسورد : www.sourcebaran.com

 

اموزش طراحی قالب وردپرسبخش اول

اموزش طراحی قالب وردپرسبخش دوم

اموزش طراحی قالب وردپرسبخش سوم

اموزش طراحی قالب وردپرسبخش چهارم

اموزش طراحی قالب وردپرسبخش پنجم

اموزش طراحی قالب وردپرسبخش ششم

 

مجموع حجم :1/1 GB

 

روش دوم:

 

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


طراحی - قالب وردپرسقسمت 1

طراحی - قالب وردپرسقسمت 10

طراحی - قالب وردپرسقسمت 11

طراحی - قالب وردپرسقسمت 12

طراحی - قالب وردپرسقسمت 18

طراحی - قالب وردپرسقسمت 19

طراحی - قالب وردپرسقسمت 20

طراحی - قالب وردپرسقسمت 21

طراحی - قالب وردپرسقسمت 22

اموزش طراحی قالب وردپرسقسمت 23

طراحی - قالب وردپرسقسمت 24

 

قسمت های دیگر در قسمت نظرات سفارش دهید تا آپلود کنم ! 

 

 

 

 

دانلود فایل های مهم حتما دانلود کنید بدون این هرگز (کم حجم) 

اموزش طراحی قالب وردپرس

   

توجه : آموزش تبدیل قالب وردپرس به رزبلاگ --------> برای دانلود کلیک کنید

 

مطالب مرتبط
ارسال نظر برای این مطلب
این نظر توسط هتل تهران مشهد در تاریخ 1396/02/30 و 10:47 دقیقه ارسال شده است

مرسی بسیار عالی بود
پاسخ : موفق باشید

این نظر توسط علی ایرانی در تاریخ 1395/11/07 و 12:48 دقیقه ارسال شده است

سپاس فراوان از آموزش های مفید و کاربردیتون
پاسخ : خوشحالم از این که تونستم خدمتی کنم

این نظر توسط طراحی سایت در تاریخ 1395/10/30 و 22:52 دقیقه ارسال شده است

عالی بود
تشکر فراوان از زحمتتون
پاسخ : خوشحالم از این که تونستم خدمتی کنم

این نظر توسط طراحی و در تاریخ 1395/10/08 و 15:05 دقیقه ارسال شده است

ممنون از سایت خوبتون

این نظر توسط طراحی و در تاریخ 1395/10/08 و 15:05 دقیقه ارسال شده است

ممنونم از سایت خوبتون

این نظر توسط امید باقری در تاریخ 1395/10/06 و 6:38 دقیقه ارسال شده است

عزیزم وقتی یه فایل رو میزاری برا دانلود نگاه کن ببین کامل هست نیست اصلا اون چیزی که گفته هست یا نه فایل قسمت های آخر 4 تا پوشه خالیه با قسمت 8 الکی 113 مگابایت اینترنم حروم شد.
پاسخ : تا الان 3000 نفر مطلب دیدن و 100 ها نفر شاید دانلود کردم ولی هیچ کس مشکل شما رو نداشته . و همه هم تشکر کردن . ممکنه اشتباهی دانلود یا اشتباهی اکسترکت کردید . دوباره برسی کنید . اگر مشکلی بود بیان کنید

این نظر توسط رضا در تاریخ 1395/08/12 و 12:30 دقیقه ارسال شده است

سلام خسته نباشید میشه لینک اصلی این مطلب برام بفرستید و یا اینکه قسمت های مربوط به تبدیل اچ تی ام ال به وردپرس رو برام بفرستید میخوام تبدیل اچ تی ام ال به وردپرس رو یاد بگیرم ممنون
پاسخ : سلام .

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

قسمت 19 تا 24 اموزش تبدیل قالب اچ تی ام ال به ورد پرس هست



این نظر توسط فروشگاه ساز در تاریخ 1395/07/24 و 10:20 دقیقه ارسال شده است

ممنون استفاده کردیم.

این نظر توسط طراحی سایت در تاریخ 1395/07/24 و 10:18 دقیقه ارسال شده است

ممنون از سایت خوبتون

این نظر توسط بهاره در تاریخ 1395/07/07 و 10:37 دقیقه ارسال شده است

سلام،ممنون از زحماتتون
قسمت 12 رو آپلود کنید لطفا
پاسخ : سلام .

قرار داده شد . با تشکر از نظر شما

موفق باشید


کد امنیتی رفرش
1 2 3 4 صفحه بعد
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • آمار سایت
  • کل مطالب : 111
  • کل نظرات : 96
  • افراد آنلاین : 6
  • تعداد اعضا : 60
  • آی پی امروز : 103
  • آی پی دیروز : 29
  • بازدید امروز : 182
  • باردید دیروز : 74
  • گوگل امروز : 0
  • گوگل دیروز : 4
  • بازدید هفته : 256
  • بازدید ماه : 357
  • بازدید سال : 10,965
  • بازدید کلی : 742,147