آموزش طراحی قالب وردپرس – قالب وردپرس ، افزونه وردپرس و آموزش http://mrwordpress.ir با آقای وردپرس Wed, 05 Jul 2017 13:04:29 +0000 fa-IR hourly 1 https://wordpress.org/?v=4.8 آموزش طراحی قالب وردپرس آشنایی با فتوشاپ http://mrwordpress.ir/wordpress-theme-design-training/design-wordpress-theme-in-photoshop/ http://mrwordpress.ir/wordpress-theme-design-training/design-wordpress-theme-in-photoshop/#respond Wed, 08 Jun 2016 15:58:27 +0000 http://mrwordpress.ir/?p=5609 آقای وردپرس - Mr WordPress

آموزش طراحی قالب وردپرس آشنایی با فتوشاپ با سلام خدمت همه کاربران ، با قسمت آموزش طراحی قالب وردپرس در خدمت شما هستیم . قبل از اینکه ما طرحی رو بخواهیم طراحی کنیم باید با دو مورد آشنایی کافی داشته باشیم .   1-رنگ بندی مورد نظر برای طراحی قالب وردپرس  2- طرح پیشفرض و …

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

]]>
آقای وردپرس - Mr WordPress

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

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

 

1-رنگ بندی مورد نظر برای طراحی قالب وردپرس 

2- طرح پیشفرض و ذهنی ما

 

رنگ بندی مورد نظر برای طراحی قالب وردپرس

 

برای رنگ بندی ما سایت https://coolors.co/ به شما معرفی میکنیم ، میتونید رنگ های مورد نظر خودتون رو انتخاب کنید و برون بری کنید .

سایت https://coolors.co/
سایت https://coolors.co/

 

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

 

رنگی که ما برای طراحی قالب وردپرس انتخاب کردیم
رنگی که ما برای طراحی قالب وردپرس انتخاب کردیم

 

و اما در مورد فتوشاپ باید کمی صحبت کنیم .

پس از ساخت پروژه جدید در فتوشاپ که در آدرس زیر قادر به ساخت است :

 

FILE—> NEW

به سراغ رنگ کردن پس زمینه فایل میرویم که با کلید های ترکیبی ALT+BACKSPACE این کار انجام میشود .

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

 

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

 

منتظر نظرات ، پیشنهادات و انتقادات شما هستیم .

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

]]>
http://mrwordpress.ir/wordpress-theme-design-training/design-wordpress-theme-in-photoshop/feed/ 0
آموزش طراحی قالب وردپرس (مقدمه ) http://mrwordpress.ir/wordpress-theme-design-training/how-to-design-wordpress-theme/ http://mrwordpress.ir/wordpress-theme-design-training/how-to-design-wordpress-theme/#comments Sat, 04 Jun 2016 22:24:52 +0000 http://mrwordpress.ir/?p=5575 آقای وردپرس - Mr WordPress

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

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

]]>
آقای وردپرس - Mr WordPress

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

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

 

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

 

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

 

 

نرم افزار فتوشاپ

نرم افزار فتوشاپ برای آموزش طراحی قالب وردپرس :

دانلود از لینک : http://soft98.ir/software/pic-tools/3153-Adobe-Photoshop.html

 

نرم افزار های کد نویسی

 

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

phpstorm –> دریافت از لینک : https://www.jetbrains.com/phpstorm/

brackets –> دریافت از لینک : http://brackets.io/

notepad++ –> دریافت از لینک : https://notepad-plus-plus.org/

Atom –> دریافت از لینک :

 

dreamWeaver

و پیشنهاد ما dreamWeaver :

 

دریافت از لینک : http://soft98.ir/internet/web-design/2510-Adobe-Dreamweaver.html

 

فیلم آموزش طراحی قالب وردپرس به زبان فارسی 

 

 

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

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

]]>
http://mrwordpress.ir/wordpress-theme-design-training/how-to-design-wordpress-theme/feed/ 4
آموزش طراحی قالب وردپرس آشنایی با html قسمت دوم http://mrwordpress.ir/wordpress-theme-design-training/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-%d8%a2%d8%b4%d9%86%d8%a7%db%8c%db%8c-%d8%a8%d8%a7-html-%d9%82%d8%b3%d9%85/ http://mrwordpress.ir/wordpress-theme-design-training/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-%d8%a2%d8%b4%d9%86%d8%a7%db%8c%db%8c-%d8%a8%d8%a7-html-%d9%82%d8%b3%d9%85/#comments Tue, 17 Nov 2015 17:44:48 +0000 http://mrwordpress.ir/?p=4898 آقای وردپرس - Mr WordPress

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

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

]]>
آقای وردپرس - Mr WordPress

با سلام خدمت شما  ، با آموزش طراحی قالب وردپرس آشنایی با html قسمت دوم در خدمت شما هستیم

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

قسمت اول :

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

خب همان طور که از جلسه قبل بیاد دارید امروز قراره پیش نیازهای html و css را بگیم و اگر هم وقت کنیم کمی هم وارد وردپرس میشیم

آموزش طراحی قالب وردپرس : تگ های html

 

تگ html

تگ head

تگ body

تگ div

تگ p

تگ a

تگ ul

تگ li

تگ img

خب دوستان اولین تگ برای شروع طراحی قالب تگ html هستش این تگ دیگه رسما ورود شما به دنیای طراحیه 😀

و مهم ترین چیزی که باید به دونید همه ی تگ های html به صورت زیر شروع میشن

<tag name>

و با

</tag name>

تمام میشن!

با این اوصاف بریم سراغ اولین تگ طراحیمون یعنی آقای html

خب این تگ اول و اخر صفحه های که طراحی می کنین باید باشه! و به صورت دقیق تر در هر صفحه فقط یک بار این تگ داخلش نوشته میشه 😀 داخل جزوه هاتون بنویسید نکته!:))

اگه شما روی هر صفحه ای که با مرورگرتون باز می کنید راست کلیک بزنید و گزینه ی View Source را بزنید می بینید که اولین چیزی که در خط اول هستش خط <html> و اخر صفحه هم </html> این استاندارد طراحی سایته! یعنی خط اول و اخر همینه 😀 دیدین چه زود رسیدم به خط اخر؟ به همین زودی هم میرسیم به اخرین جلسه طراحیمون

الان صفحه ای که ما می خواهیم ازش شروع کنیم…

 

1

این الان صفحه کد نویسی ماست! که از برنامه note pad ++

 

خب این کد چون خیلی چیزی نداره واس توضیح دادن در همین حد بدونید کافیه

تگ بعدی که می خوام بهتون اموزش بدم تگ <head> هستش! این کد چیه؟ چیز خاصی نیست :))

این تگ هم مثل تگ html بیشتر صفحات دارنش و معمولا کلیات سایت و توضیحاتو داخلش قرار می گیره چون نمیدونم بگم دقیقا چیا داخلش میزارن اینجوری می گم که داخلش کد های جاوا و css داخلش معرفی میشن توضیحات مربوط به seo داخلش نوشته میشن مثل عنوان صفحه کد های گوگل انالیر و.. هر چیزی که برای کاربر مهم نیست و نمایش داده نمیشه داخل تگ هد نشون داده میشه!

یعنی الان صحفحه مون میشه:

2

5 تا خط نوشتیم تاحالا

تگ body دیگه شروع همه چیزه فهمیدین؟ شروع همه چیزه هر تگی که دیگه از اینجا به بعد می گیم داخل همین تگ body قرارش میدید 😀

untitled

سه تا تگ اصلی را گفتم این اصول کار یا همون الفبا مونه بقیه تگ ها رو دیه اینجوری توضیح نمی دم چون می خواییم زود بریم سر اصل مطلب!

تگ <div> تقریبا هر صفحه ای که شما میبینید شاید بالغ بر 100 تا از این کد استفاده شده باشه پس خوب روی این تگ مانور بدین

تگ <p> که مربوط به متن ها و نوشته هاتونه و معمولا برای پاراگراف ها استفاده میشه

تگ <a> برای لینک ها هستش!

تگ <img> برای عکس ها!

تگ بعدی ul و li این دوتا تگ معمولا با هم استفاده میشن و تگ li داخل ul هستش! معمولا ها! و اصلا بعضی جاها هم اصلا داخل ul قرار نمیگیره و خودش تنهایی کار میکنه 🙂

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

456

الان این موارد بالا اگه توجه کنید همه شون داخل یه مستطیل بزرگ هستن که به اون مستطیل بزرگه تگ ul می گن البته الزاما نیازی نیست که از تگ ul استفاده کنید و می تونید باز هم از تگ div استفاده کنیم! اما این تگ ul یه سری کدهای css پیش فرض داره که خیلی کمک میکنه و نیازی نیست دوباره برای css بنویسیدشون!

تگ li هم همون مواردی هستن که داخلش نوشته شده فکر کنم منظورمو گرفتید چی می گم! 😀

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

موفق باشید و امیدوارم توضیحاتی که دادیم مفید باشه!

 

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

]]>
http://mrwordpress.ir/wordpress-theme-design-training/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-%d8%a2%d8%b4%d9%86%d8%a7%db%8c%db%8c-%d8%a8%d8%a7-html-%d9%82%d8%b3%d9%85/feed/ 3
آموزش طراحی قالب وردپرس از صفر تا صد رایگان http://mrwordpress.ir/wordpress-theme-design-training/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-%d8%a7%d8%b2-%d8%b5%d9%81%d8%b1-%d8%aa%d8%a7-%d8%b5%d8%af-%d8%b1%d8%a7%db%8c/ http://mrwordpress.ir/wordpress-theme-design-training/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-%d8%a7%d8%b2-%d8%b5%d9%81%d8%b1-%d8%aa%d8%a7-%d8%b5%d8%af-%d8%b1%d8%a7%db%8c/#comments Sat, 14 Nov 2015 17:20:50 +0000 http://mrwordpress.ir/?p=4878 آقای وردپرس - Mr WordPress

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

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

]]>
آقای وردپرس - Mr WordPress

آموزش طراحی قالب وردپرس از صفر تا صد رایگان
آموزش طراحی قالب وردپرس از صفر تا صد رایگان

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

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

شما ما رو نداشتین چیکار می کردین؟؟

این اموزش بیشتر برای انتقال اطلاعات بنده به شماست و ما می خواهیم در همون ضمینه ای که تخصص داریم به شما اموزش دهیم یعنی….وردپرس 😀

خب می خواهیم امروز براتون مقدمات کلی + مراحل و اهداف و شرایط اموزش را بگم 😉

همان طور که می دانید شما کلاس اول ابتدا الفبا را می خونید بعدش بزرگتر میشید و جمله نوشتن و معادله حل کردن را یاد می گیرید و بعضی جاها هم از استادا  سوال می پرسید و… می گید اینا به چه دردی می خوره…. 😀 ما هم دقیقا می خواهیم همینکارو کنیم و اول الفبا را می گیم بعدش جمله نوشتن را یادتون می دیم سوالاتونو می پرسید جوابتونو میدیم و مهم تر از همه براتون تکلیف در نظر می گیریم و شما تمرین ها را حل می کنید و برای ایمیل بنده ارسال می کنید و من بررسی می کنم و از صد بهتون نمره می دمو اشکالاتونو داخل ایمیلتون جواب میدم و اگه هم سوالتون خیلی عمومی بود با اسم خودتون در قسمت بعدی اموزش منتشر می شه 😉

 

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

بخش اول مقدمه است چون تخصص ما بیشتر روی وردپرس هستش پس عقل هم حکم می کنه شاگردایی هم کم داریم دنبال وردپرس باشن خب اینو اول ترم گفتم که کسی می خواد بره بفرما می تونه بره اخر ترم هم نمره شو میدیم 😉

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

info@mrwordpress.ir 

می زنید. حالا چرا ایمیل! اول از این که من می خوام چیزی که بهتون یاد میدم کامل باشه یعنی هم من دنبال شما باشم هم شما دنبال من پس اگه یه جلسه نبودید مطمین باشید میام دنبالتون 😀

خب آموزش طراحی قالب وردپرس که قرار به شما بدیم نیاز به یه سری پیش نیاز ها هستش مثل یادگیری html و css اگه نمی دونید چی هستن پس پاراگراف زیرو بخونید اگه هم می دونید و از منم استادترید برید پایین حالشو ببرید تا ما هم بهتون ملحق شیم 😉

Html هر کدی را که مرورگر شما بهتون نمایش میده یه ربطی به html داره یعنی از اون بالای مرورگرتون تا پایین سایت html نوشته شده 😀

هیچ فرقی هم نمی کنه که چه شکلی باشه یا چی هستش بالاخره یه ربطی به html داره! به طور کلی می تونم بگم مرورگر شما فقط زبان html می فهمه و اجرا می کنه! خب برای توضیح کامل تر یه سرچ گوگل بزنید و اگه هم خیلی html بلد نیستید بهتره همین الان این صفحه را ببندید!

خب یعنی شما دیگه تا اخرش هستید؟ فکر نمی کنم هنوز مونده

مبحث بعدی css هستش که این دیگه زبان ظاهر هستش یعنی دیگه هر شکلی که می بینید یه جوری با css در ارتباط نزدیکه

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

ffffff

 

ffff

تغیرات را دیدید؟ البته اون عکس اولی هم هنوز داخلش css استفاده شده و اون کدهای css که استفاده شده پیشفرض های مرورگتون هستند!

من شاگردی که html و css بلد نیست قبول نمی کنم مگر با این شرط که خودش در طول اموزش ها           یادبگیره و با           پیش نیاز هایی که من می گم دنبالشون بره. سوالی هم داشت از من بپرسه با           گوش دل جوابشو میدم!

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

دارم سنگامو باهاتون وا می کنم اخر ترم دیگه نگید ایطوره استاد نرسیدم بخونم نمره بده و… از این خبرا           نیست وقت بزارید براتون وقت میزارم 😉

می خوام ببینم اخر ترم چندتا طراح ازتون اومده بیرون :))

خب ما هم رسیدیم ببخشید که منتظر موندید!

حال وقته گفتن برنامه مون برای شماست :-p اونایی هم که می خواستن برن رفتن :))

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

 

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

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

اول html

ما داخل بخش اموزش های html چندتا تگ بهتون یاد میدیم و یک مختصر توضیح هم می دیم اگه کسی خواست بره    سرچ کنه! اما مطمین باشید اخر هر جلسه یه تمرین هایی بهتون میدم که نیاز به سرچ کردن دارید :)) الان حتما می گید  عجب استاد بداخلاقی..!! همینه که هست برای خودتونه 😀

خب تگ های پیش نیازتونو می گم 😉

تگ html

تگ head

تگ body

تگ div

تگ p

تگ a

تگ ul

تگ li

تگ img

دیدید؟

همین ها را یاد بگیرید هیچی ازتون نمی خوام چند تاست؟

9 تا تگن! L چقد کم فکر می کردم بیشتر میشن; خب چیکار میشه کرد دیگه همینیه که هست!

بعدش بگین استاد بد!

خب این تگ هارو که یاد گرفتید بعدش باید بریم سراغ ظاهر کار هیچکی دوست نداره یه مشت حرف و کلمه مثل کتابا دبیرستان پشت سر هم ببینه و بخونه 🙂

پیش نیاز های css

خب تقریبا این مبحث یکم بیشتر html هستش و اینجا یکم سختگیری می کنم

بریم سراغ دستورات css

اخ ببخشید!!!

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

منظورم چیه؟ مثلا نگاه کنید وقتی شما با مووس روی یه دونه از تگ های html میرید این مرورگره می گه این تگ الان وضعیتش hover هستش یعنی این تگ الان موس داره روی تگ حرکت می کنه مثال واضح تر بعضی سایت ها را دیدید که وقتی با موس می رید بعضی جاهاشون رنگشون عوض میشه یا حرکت می کنن یا… این با css هستش که می گه این تگ وضعیت hover داره حالا اینو گفتم که بگم ما چند تا از این وضعیتا داریم مثل active,visited,focus,hover بعدا در مورد تک تکشون توضیح میدم 😉

خب حالا بریم سراغ دستورات css که می خوام حالتونو بگیرم

 

Left Top
Width Height
Padding Margin
Display  Position

 

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

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

رای شما باشه .

تا آموزش بعد بدرود .

 

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

]]>
http://mrwordpress.ir/wordpress-theme-design-training/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-%d8%a7%d8%b2-%d8%b5%d9%81%d8%b1-%d8%aa%d8%a7-%d8%b5%d8%af-%d8%b1%d8%a7%db%8c/feed/ 1