article

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

web-design

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

برای طراحی قالب وب از کجا شروع کنیم؟


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

تسلط بر HTML و CSS


همان طور که گفتیم گام اول در طراحی قالب، تسلط بر HTML و CSS است، HTML به عنوان زبان پایه مورد استفاده در وب و CSS برای استایل نویسی و شکل دهی به ظاهر صفحات وب از اهمیت زیادی در طراحی قالب برخوردارند، شاید گمان کنیم یادگیری این موارد زمان زیادی می برد که البته تا حدود زیادی درست است، دانش وب جزئیات زیادی دارد اما اگر اندک اندک اما پیوسته پیش برویم و مباحث را از ابتدا و با کدهای کوچکتر بیاموزیم خواهیم دید که رفته رفته دانشمان بیشتر و بیشتر شده و طراحی وب و کدنویسی جز مهارتهای شیرین و جذابی خواهند بود که از انجام آن لذت می بریم، در فرآیند آموزش و تمرین نیز بهتر است ابتدا از پروژه های کوچک و آزمایشی شروع کنیم و رفته رفته به سمت طراحی قالب کاربردی پیش برویم، اما چرا باید HTML و CSS را یاد بگیریم؟ پاسخ روشن است، مترجم ایده های ما در طراحی وب این دو زبان هستند، HTML در واقع یک زبان قراردادی است و به همین دلیل فراگیری آن ساده است، CSS نیز اصول و قواعد خود را دارد که در کنار HTML و جهت استایل دهی به تگ های آن مورد استفاده قرار می گیرد.

یادگیری فتوشاپ (Photoshop) و تکنیک های طراحی


پس از تسلط در بخش کدنویسی HTML و CSS باید کمی تکنیک های طراحی گرافیکی را هم بیاموزیم، البته نیازی نیست یک فتوشاپ کار حرفه ای باشیم همین که بتوانیم نیازهایمان را مرتفع کنیم کافی خواهد بود، در ایجاد قالب های وب ممکن است به دلایل مختلف نیاز به عناصر گرافیکی باشد، به طور مثال برخی ترجیح می دهند طرح کلی کار را در برنامه هایی نظیر فتوشاپ (Photoshop) به صورت تصویری پیاده سازی کنند و سپس بلاک های مورد نظر را برش زده و در کدنویسی HTML و CSS استفاده نمایند، همچنین در مواردی ممکن است برای تزئین قسمت هایی از قالب یا برای ویرایش عناصر گرافیکی به کار رفته در قالب به این برنامه نیاز داشته باشیم، هرچند در سالیان اخیر با معرفی امکانات نسخه جدید CSS، وابستگی طراحان به برنامه های گرافیکی کاهش پیدا کرده است اما همچنان نقش این برنامه ها در طراحی وب پررنگ است که این لزوم تسلط بر یک نرم افزار گرافیکی را جهت طراحی قالب وب یادآور می شود، در زمینه الگوبرداری نیز استفاده از سورس ها و فایل های آماده وب ایده های خوبی در اختیارمان می گذارد هر چند تقلید صرف را توصیه نمی کنیم.

استفاده از نرم افزارها


برای طراحی و کدنویسی قالب های وب معمولا نرم افزارهایی مورد استفاده طراحان و توسعه دهندگان قرار می گیرد، از جمله در زمینه قالب های آماده که بیشتر به کار طراحان کم تجربه تر می آید می توان به برنامه Artisteer اشاره کرد، در زمینه کدنویسی پیشرفته نیز برنامه Adobe Dreamweaver یکی از معروف ترین ها است که می تواند استفاده چند منظوره (طراحی و کدنویسی) داشته باشد، برنامه phpStorm برای توسعه دهندگان حرفه ای زبان برنامه نویسی PHP نیز گزینه واقعا قوی و مطرح دیگری است، استفاده از نرم افزارها در کدنویسی و طراحی قالب سایت و وبلاگ به موارد گفته شده محدود نمی شود، با یک جستجوی کوتاه در وب می توانیم موارد دیگری را نیز پیدا کنیم که ممکن است کار با آنها به نظرمان ساده تر و جذابتر باشد.

آشنایی با تگ های اختصاصی سایت یا سرویس وبلاگی


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

کاربرد تگ های اختصاصی قالب و نمونه کدها


قبل از اینکه بخواهیم قالبمان را خودمان طراحی و ایجاد کنیم باید به تگ های اختصاصی و معنی کدهای سیستم مدیریت محتوای سایت یا سرویس وبلاگی خود اشراف داشته باشیم، معمولا سیستم های مدیریت محتوای سایت یا سرویس های ارائه دهنده خدمات ایجاد وبلاگ برای نمایش امکانات و بخش های مختلف از کلمات مشخصی به عنوان تگ اختصاصی در قالب ها استفاده می کنند، به طور مثال اگر برای سیستم وبلاگی خاصی قالب طراحی می کنیم باید بدانیم که تگ های اختصاصی آن چیست، به فرض ممکن است تگی با نام
<-PostContent->
در آن سیستم سازنده بخش مطالب باشد و برای نظرات عبارات قراردادی دیگری مانند
<-BlogComment->
استفاده شود و... یعنی اگر در کد قالب آن سرویس وبلاگی چنین عبارتی را درج کنیم، به جای این عبارات قسمت مربوط به آنها (به فرض بخش مطالب، بخش نظرات و...) در خروجی HTML صفحه وب نمایش داده خواهد شد، خوشبختانه اکثر CMS ها و سرویس های ایجاد وبلاگ راهنمای خوبی در این مورد در اختیار طراحان قرار می دهند که با مراجعه به آدرس آنها یا در بخش ویرایش کد قالب در دسترس است، لذا در اولین گام باید به این بخش ها مراجعه و با تگ های اختصاصی طراحی قالب سیستم مدیریت محتوای سایت یا سرویس وبلاگی آشنا شویم، در کنار انجام این کار می توانیم چند نمونه کد قالب آماده را از بخش قالب های پیش فرض انتخاب و بررسی نمائیم، این کار نقش زیادی در بدست آوردن درک کلی از اینکه قالب چیست و چه شیوه کدنویسی در آن به کار گرفته شده است، خواهد داشت.

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


جهت درک بهتر، آشنایی بیشتر و داشتن دورنمای کلی از طراحی قالب وب، یک نمونه فرضی کد قالب وبلاگ را به همراه پیش نمایش آنلاین آن در زیر درج کرده ایم (نمونه زیر کاملا فرضی و کدنویسی آن ناقص می باشد، صرفا جهت آشنایی بیشتر درج شده است):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمونه کد فرضی قالب وبلاگ</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
a, a:hover{
    text-decoration:none;
}
#header{
    background:#15ACD3;
    width:100%;
    height:200px;
    text-align:center;
}
#menu{
    background:#9A070A;
    width:100%;
    height:50px;
}
#main{
    background:#F0F0F0;
    min-height:200px;
    width:100%;
}
.sidbar-right{
    background:#E5E5E5;
    display:inline-block;
    width:25%;
    text-align:justify;
    text-align:center;
}
.center{
    background:#E9E9E9;
    display:inline-block;
    width:50%;
    text-align:justify;
    text-align:center;   
}
.sidbar-left{
    background:#E5E5E5;
    display:inline-block;
    width:25%;
    text-align:center;
}
#footer{
    background:#333;
    color:#FFFFFF;
    width:100%;
    height:50px;
    text-align:left;
}
</style>
</head>
<body>
<div id="header">
<h1><-BlogTitle-> عنوان صفحه</h1>
<h3><-BlogDescription-> شرح صفحه</h3>
</div>
<div id="menu"><a href="#">صفحه اصلی</a> <-BlogTopMenu-></div>
<div id="main">
<div class="sidbar-right">
کدهای مربوط به سایدبار سمت راست <-BlogAbout->
</div><div class="center">
کدهای مربوط به قسمت مطالب <-BlogContent->
</div><div class="sidbar-left">
کدهای مربوط به سایدبار سمت چپ <-BlogAds->
</div>
</div>
<div id="footer">
کدهای مربوط به قسمت فوتر قالب <-BlogFooter->
</div>
</body>
</html>
پیش نمایش آنلاین
در پایان این مطلب یادآور می شویم پیش نیاز فراگیری مهارت طراحی قالب وب طی دوره های آموزش مقدماتی HTML و CSS است و نمی توان در یک یا چند مطلب جزئیات مختلف این مهارت را آموزش داد، در این یادداشت سعی شد تا دورنمای کلی کار و اطلاعات اولیه مورد نیاز برای علاقمندان شرح داده شود.
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» طراحی باکس جستجو با فتوشاپ و CSS
» چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
» آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
» زیبا سازی فرم های وب با CSS
» طراحی و کدنویسی هدر قالب با فتوشاپ، HTML و CSS
commentنظرات (۱۶۳ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: poya
۱۷:۳۷ ۱۳۹۷/۰۶/۱۳
سلام
یه سوال ازتون داشتم
من خیلی علاقه دارم که یه قالب وبلاگ (مثل قالب سایت) طراحی کنم و مثلا مثل همین سایت شما توش مطلب آموزشی بزارم الانم طبق چیزی که خودم میدونم HTML رو ۹۰٪ و CSS رو ۸۵٪ تقریبا بلدم به نظر شما برای این کار باید این دو زبان رو کاملا (۱۰۰٪) بلد باشم یا همین مقدار برای ساخت یه وبلاگ آموزشی کوچیک کافیه؟ البته خودمم میدونم که برای پویا سازی وبلاگ باید جاوا اسکریبت هم بلد باشم
پاسخ: 
برای شروع طراحی قالب وبلاگ این مقدار از آشنایی با HTML و CSS کاملا مناسب است، در گام های نخست بهتر است از نمونه قالب های موجود الگوبرداری کنید و رفته رفته ایده ها و کدهای خودتان را عملی نمائید، بخش زیادی از دانش و مهارت در حین کار به دست می آید، اما برای آموزش این موارد قاعدتا باید به تسلط کاملی از مفاهیم و نحوه کاربرد دستورات دست پیدا کنید و تجربه عملی کافی داشته باشید.
نویسنده: محدثه
۰۲:۴۳ ۱۳۹۷/۰۹/۳۰
سلام من تازه صفحه وبلاگ ساختم چند تا هم متن گذاشتم اما وقتی صفحمو باز میکنم قسمت درباره من یا پیوندهای روزانه نیستن و فقط نوشته وجود دارن باید چیکار کنم تا صفحم مثل بقیه وبلاگا بشه؟!
پاسخ: 
آدرس وبلاگ را درج نکرده اید، امکان بررسی دقیق وجود ندارد! با توجه به توضیحات اگر در پنل مدیریت وبلاگتان متن درباره من و پیوندهای روزانه را اضافه کرده اید و همچنان این مشکل وجود دارد به احتمال قوی کدهای قالب وبلاگتان ناقص است، می توانید از قسمت انتخاب و ویرایش کد قالب در پنل مدیریت یک قالب جدید انتخاب کنید.
نویسنده: یکی
۰۱:۱۷ ۱۳۹۷/۱۰/۱۸
سلام میخوام یه تصویر زمینه بسیار زیبا برای وبلاگم طراحی کنم .
لطفا کمککککککککککککککک
پاسخ: 
مشخص نکرده اید مشکل دقیقا در کدام قسمت است؟ در بخش طراحی باید کار با برنامه های گرافیکی نظیر فتوشاپ و در بخش کدنویسی باید زبان هایی مانند HTML و CSS را بلد باشید.
نویسنده: john
۱۳:۴۴ ۱۳۹۸/۱۰/۱۸
سلام خدمت شما ببخشید آیا میشه از کد های پی اچ پی هم داخل وبلاگ استفاده کرد؟
پاسخ: 
در سرویس های متداول وبلاگی خیر، مگر اینکه از برنامه های مدیریت محتوا مانند وردپرس بر روی دامنه و هاست شخصی استفاده کنید.
نویسنده: محیا
۱۳:۴۳ ۱۳۹۹/۰۲/۰۲
نمیشه با برنامه فتوشاپ اول طراحی کنیم بعد کد رو بده بهمون؟ چون من دیده بودم که کد css برای استفاده در وبلاگ ها داشت
پاسخ: 
برنامه فتوشاپ امکان ارائه استایل CSS را از منوی Layer دارد که در فرآیند تبدیل می تواند کمک کننده باشد، منتها قالب های وب باید به صورت HTML اسکلت بندی و سپس با CSS فرم بگیرند، لذا صرف فتوشاپ کفایت نمی کند.
نویسنده: mahdi
۱۸:۰۲ ۱۳۹۹/۰۲/۰۸
سلام استاد عزیز و گرامی ، من برای طراحی سایت آیا نیازی هست که به زبان php مسلط باشم یا حداقل یکمی ازش بلد باشم کافیه؟
این سوالو کامل اگر توضیح بدی خیلی خیلی خیلی ممنونت میشم که در چه سطحی از کار طراحی سایت باید به php مسلط بود؟
سر دوراهی موندم که آیا زمانم رو بزارمو برنامه نویسی اندروید یاد بگیرم یا php ... فکر خودم اینه که من نمیخوام سایتهای بزرگی مثلا مثل آپارات یا دیجی کالا و .... طراحی کنم چون قصدم کار شخصی و تکی هست نه با گروه و برای همین فکر میکنم نیازی نداره کلی از زمانمو بزارم برای یادگیری php و آخر سر هم که یادگیریم تموم شد ببینم که هیچ کار خاصی باهاش انجام نخواهم داد .... بنظر خودم چیزایی که لازم دارم آموزش ببینم اینا هستن
html, css, jsvascript, jquery, react, angular, json, ajax و sql و اندکی php
آیا بنظرتون من درست فکر میکنم ؟
لطفا یه توضیح کامل و جامع بهم بدید خیلی درگیر این موضوع شدم
و اگر php و sql باید به مقدار لازم بلد باشم ، لطفا بگید تا چه حد باید بلد باشم و چه مبحثایی رو باید یاد بگیرم؟
خیلی ممنونتم استاد بخدا هیچکسو جز شما ندارم این سوالارو ازش بپرسم ، خیلی ممنونت میشم رو این سوالام وقت بزاری و یه جواب کامل بهم بدی تا از این سردرگمی دربیام ، خیلی ممنونتم موفق باشی
پاسخ: 
اگر می خواهید با سرعت بیشتر وارد بحث تجاری و بازار کار شوید معمولا استفاده از کتابخانه ها، فریم ورک ها و برنامه های آماده قابل سفارشی سازی (به فرض جی کئوری، وردپرس، ادیتورهای WYSIWYG و...) توصیه می شود و نیازی نیست و نباید درگیر برنامه نویسی مجدد ابزارهایی که به صورت عمومی در دسترس هستند شوید، اما در هر حال گذراندن دوره های مقدماتی هرچند فشرده لازمه کار است، برنامه نویسی یک حرفه فنی است و نباید انتظار داشته باشید که بدون کسب مهارتها و تجربه بتوانید همه ایده هایتان را به راحتی تبدیل به واقعیت کنید، خیلی از دانستنی ها صرفا حین کار کسب می شوند! در خصوص PHP همان دوره مقدماتی را بگذرانید برای شروع کار کفایت می کند، بعد از این مرحله باید تمرکزتان را روی متدهای برنامه ای که قرار است از آن استفاده کنید بگذارید، به فرض اگر پایه کارهایتان وردپرسی است سعی کنید از زیر و بم آن (ساختار، نحوه کار ماژول ها، ویرایش و سفارشی سازی قالب و...) سردربیاورید تا بتوانید برای هر مشتری متناسب با نیاز و سلیقه آن محصول نهایی داشته باشید، در خصوص Android یادگیری آن توصیه می شود و منافاتی با برنامه نویسی وب ندارد، در واقع اگر هر دو را بلد باشید برای کارتان بهتر است، بسیاری از اپلیکیشن ها باید به صورت آنلاین کار کنند و این یعنی باز هم پای برنامه نویسی وب در میان است، در واقع این زبان ها به هم مرتبط هستند به فرض مبحث شی گرائی برای هر دو زبان اصول مشابه و مشترکی دارد، ضمن اینکه امروزه اپلیکیشن و سایت مکمل هم هستند، باید سعی کنیم نه محدود به یک یا چند زبان و نه سردرگم در چندین زبان نامرتبط باشیم، باید تعادل برقرار کنیم و به نظر یادگیری مجموعه زبان هایی که خودتان اشاره کردید در کنار Android مهارت شغلیتان را کامل می کند، کمی هم گرافیک برداری (Vector) و برنامه هایی نظیر After Effects بلد باشید پکیج تکمیل می شود!
برای ورود به بازار کار اول چند پروژه آزمایشی طراحی کنید، اگر مشکلی نداشتید سفارش گیری کنید، تهیه نسخه های پشیبان از اطلاعات پروژه ها را فراموش نکنید مخصوصا در اوایل کار اشتباهات ناخواسته زیادی ممکن است رخ دهد!
نویسنده: mahdi
۱۰:۵۹ ۱۳۹۹/۰۲/۰۹
سلام ، خیلی ممنون استاد عزیز و بزرگوار ، پس من آموزش php رو هم کم کم شروع می کنم ، موفق باشی
نویسنده: mahdi
۱۹:۰۰ ۱۳۹۹/۰۲/۰۹
سلام استاد عزیز , اینو یادم رفتم بپرسم ، گفتین که کمی هم After Effects بلد باشم خوبه ، فتوشاپ رو تا حدود کمی بلدم ولی نرم افزار کورل رو تقریبا تسلط کامل دارم که وکتوری هم هست و بنظرم بهترین نرم افزار وکتوریه ، میشه حتی خروجی svg با اشکال مختلف گرفت بطوریکه مستقیم در صفحه ایندکس هم برای عکس هم برای بکگراند با حجم خیلی کم استفاده بشه ، افتر افکت رو فقط اسمشو شنیدم ولی هیچوقت نرفتم ببینم چیه ، بنظرتون لازمه از اون هم یکم بلد باشم؟
یه سوال دیگه هم داشتم اینکه آموزشهای w3school توی ری اکت و انگولار و نود جی اس از لحاظ صرفا تئوری بنظرتون کامله (منظورم بغیر از اون تجربه هایی هست که گفتین حین کار بدست میاد)؟
خیلی ممنون استاد عزیز و مهربان و دوست داشتنی ...
پاسخ: 
کورل یا فتوشاپ بودن مهم نیست، مهم اینکه نیازهای گرافیک حوزه وب را پوشش دهد و با نحوه کار آن برنامه راحت باشید، در خصوص افترافکتز با توجه به اینکه گفتید می خواهید شخصی کار کنید برای ساخت تیزرهای کوتاه و کلیپ های آموزشی به صورت موشن گرافیک کاربرد دارد و در کل یک برنامه مهارتی حرفه ای و پرکاربرد از مجموعه ادوبی است که اگر بلد باشید به خصوص در مورد ویدئوهای تبلیغی یا آموزشی به کار می آید، بهتر است یادگیری آن را به مراحل آخر موکول کنید.
در خصوص w3school در کل هیچ وقت به یک منبع بسنده نکنید، اگر مبحثی را کامل متوجه می شوید شاید همین منبع کفایت کند اما در صورتی که احساس می کنید مثال ها کم یا ابهامی وجود دارد در گوگل جستجو کنید! آموزش های w3school صرفا برای شروع گزینه مناسبی هستند، خیلی از نمونه کدهای برنامه ها را باید در جاهای دیگر پیدا کنید.
نویسنده: میترا
۱۸:۱۵ ۱۳۹۹/۰۳/۰۲
با سلام
ببخشید مطلبتون خیلی خوب بود
یه سوال من با فتوشاپ انلاین کار می کنم نمی دونم چرا نمی تونم باهاش قالب بسازم
ببخشید
پاسخ: 
لطفا در خصوص مشکل بیشتر و به صورت موردی توضیح دهید تا امکان راهنمایی دقیقتر وجود داشته باشد، در حالت کلی فتوشاپ عموما یک ابزار کمکی و برای ترسیم شکل کلی یا اجزاء گرافیکی قالب است و مهمتر از آن باید کدنویسی HTML و استایل CSS بلد باشید.
نویسنده: mahdi
۲۱:۴۸ ۱۳۹۹/۰۴/۰۳
سلام استاد عزیز و گرامی امیدوارم که حالتون خوب باشه ، اگه براتون ممکنه لطفا یه آموزش خوب در زمینه وردپرس بهم معرفی کنید ، میدونم که هیچ آموزشی کامل نیست ولی به دانش شما اعتماد دارم و ممنون میشم که هر آموزشی که بنظرتون بهتر میاد رو بهم معرفی کنید ، موفق و پیروز باشی استاد عزیز و بزرگوار
پاسخ: 
اگر صرفا طراحی قالب وردپرس مد نظر است:
قالب های وردپرس در کل مبتنی بر همان HTML و CSS و کدنویسی PHP هستند یعنی ابتدا باید اینها را فرا بگیریم و فرم اصلی کار را طراحی کنیم، در گام دوم باید با ساختار فایل بندی قالب ها و انواع مختلف متدهای وردپرس که به صورت دستورات PHP در قالب استفاده می شوند آشنا شویم، برای شروع در خود دایرکتوری قالب ها می توانیم موارد پیش فرض را بررسی کنیم که جنبه آموزشی مناسبی دارند، در کنار اینها چند منبع به انگلیسی:
https://codex.wordpress.org/Theme_Development

https://www.taniarascia.com/developing-a-wordpress-theme-from-scratch/

https://colorlib.com/wp/how-to-create-unique-wordpress-themes-tutorials/
برای زبان فارسی باید در انجمن های وردپرس و سایت های ارائه دهنده خدمات وردپرسی جستجو کرد، اما توصیه می کنیم اگر زمان کافی دارید خرید موارد غیر رایگان خیلی ضرورتی ندارد مگر اینکه واقعا به مبحثی نیاز مبرم داشته باشید یا احساس می کنید آموزش کامل است و ارزش صرف هزینه را دارد.
نویسنده: سفی
۱۴:۴۳ ۱۳۹۹/۰۵/۱۰
سلام و خسته نباشید من فایل آموزش html مقدماتی رو دیدم اما وقتی روی index.html کلیک راست کردم این گزینه ++edit..c رو ندیدم چه برنامه ای لازمه که نصب کنم
پاسخ: 
برای ویرایش دستورات HTML می توانید از برنامه Notepad ویندوز استفاده کنید، یا اینکه برنامه ++Notepade را دانلود و نصب کنید.
نویسنده: آرام
۰۳:۲۲ ۱۳۹۹/۰۹/۱۹
سلام ببخشید.
برای ساخت قالب باید برنامه ای نصب کنیم؟
اصلا در کجاها میشه قالبو درس کرد؟
ممنون میشم جواب بدید.
پاسخ: 
لطفا مطلب حاضر را مطالعه کنید، دقیقا در خصوص همین موارد توضیح داده شده.
نویسنده: نیلو
۲۰:۲۰ ۱۳۹۹/۱۰/۱۳
سلام...
ببخشید بعد طراحی قالب قالب شیشه ایم هست یا نه؟؟؟
پاسخ: 
منظورتان از "قالب شیشه ای" مشخص نیست؟! اگر منظور قالب های شفاف با پس زمینه مات است این تکنیک های زیرمجموعه مباحث طراحی وب و استایل نویسی با CSS هستند و مبحث جداگانه ای نیست.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





7 × 8
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form کوثر رحیمی
در:
سلام ا ز راهنماییتون ممنونم من تازه وبلاگم رو درست کردم ۱۲ سالمه هر کاری می کنم فیلم در اون قرار نمیگیره همش این خطا...
۱۳۹۹/۱۰/۲۹

form متین
در:
سلام و خسته نباشید من بخوام داده ای که از قبل موجوده رو با متد پست به یک فایل ارسال کنم چجور میشه؟ یعنی...
۱۳۹۹/۱۰/۲۷

form روشنا
در:
سلام ما یه وبلاگ گروهی داریم مختص املاک فایل های جدید و حتی قالب جدید اصلا اعمال نمیشه . حتی راهنمایی که کرده...
۱۳۹۹/۱۰/۲۷

form علی
در:
من در یک سایت سازی سایت ساختم یه بخش داره به نام اسکریپت دلخواه می خوام یه اسکریپتی بذارم که مثلا یه موسیقی وقتی کاربر...
۱۳۹۹/۱۰/۲۷

form امیرحسین
در:
بله استاد خیلی ممنون، نمیدونستم خودش Optimize رو انجام میده در کل من بعد از ایندکس گذاری ها همیشه سعی کردم جوری که با...
۱۳۹۹/۱۰/۲۶

form امیرحسین
در:
ُسلام وقت بخیر این کووری هم چون اول قسمت WHERE انجام میشه بعد قسمت ON پس این کووری هم با حالت کووری قبلی برابره
۱۳۹۹/۱۰/۲۶

form امیرحسین
در:
سلام استاد وقت بخیر ممنون از پاسخ گویی های قبلی یه سوال دیگه داشتم: این هم هیچ مشکلی نداره و کار میکنه، ایا...
۱۳۹۹/۱۰/۲۵

form محمد بیدل بازه
در:
سلام خسته نباشید ببخشید من توی یک قسمت سایتم تصویری دارم و میخوام سمت راست اون تصویر متن بنویسم ولی نمیشه تا متن رو...
۱۳۹۹/۱۰/۲۵

form سلام
در:
و اینکه یه تگ خوب برای فونت معرفی کنید و یه تگ دیگه که متن رو (تیتر مطلب (تست)) در ادامش بنویسه نه اینکه...
۱۳۹۹/۱۰/۲۴

form سلام
در:
سلام وبسایتم را نگاه کنید از چه تگی استفاده کنم تا فاصله بین تیتر مطلب جدید را کاهش دهم؟ (از خطی به خط...
۱۳۹۹/۱۰/۲۴

form وطن
در:
سلام. خسته نباشید. خیلی گشتم درباره یک خطا یا ایراد فنی که چند روز هست در سایت نوشته شده با پی اچ پی (اسکریپت اولوشن)...
۱۳۹۹/۱۰/۲۴

form حورارمی
در:
سلام. من هنوز نمیدونم تو تنظیمات باید کجا رو بگردم تا قالب وبلاگم رو با عکس مورد علاقه ام تغییر بدم. یا نمیتونم...
۱۳۹۹/۱۰/۲۳

form راشد
در:
این روش خیلی طولانیه در فروشگاه من یک برنامه گرفتم که یه عکس توش اپلود کن بهت یک لینک میده در ظرف چند ثانیه و...
۱۳۹۹/۱۰/۲۱

form باسلام
در:
باسلام خدمت شما عزیز زحمت کش، من مطلب را تا آخر مطالعه کردم. من وبلاگم بازدیدای زیادی داره چون تمام مطالبش رو خودم مینویسم و...
۱۳۹۹/۱۰/۲۱

form محمود
در:
سلام و عرض ادب من در سایتم یک قسمت تب ایجاد کردم، متن ها را که در تب می نویسم پاراگراف بندی نمی شوند....
۱۳۹۹/۱۰/۲۱
form علی آقابیگی
در:
سلام خسته نباشید ببخشید من می خواستم کد جدید در وبلاگم بزارم بعد اشتباهی رفتم در قسمت ویرایش کدها و بعد بیشتر کدها را پاک...
۱۳۹۹/۱۰/۲۰
form محمد
در:
سلام. من میخوام با جاوا اسکریپت یک کدی بنویسم که وقتی کاربر روی یک دکمه ‏ای کلیک کرد، یک کد تصادفی برای شمارش ارسال...
۱۳۹۹/۱۰/۲۰
form پوریا
در:
سلام خسته نباشید، ممنونم بابت توضیحات خوبتون، یه مشکلی داشتم میخواستم ببینم امکانش هست راهنمایی کنید؟ فرض کنید یه اینطور متنی داریم: ...
۱۳۹۹/۱۰/۱۹
form seyedsobhanmansouri
در:
سلام خسته نباشید من سایتمو طراحی کردم اما به این مشکلات بر میخورم اول اینکه هدر سایتم نمایش داده نمیشه اصلا و بعد...
۱۳۹۹/۱۰/۱۹
form رضا
در:
سلام. ممنون بابت مطالب مفیدتون. این نوع جستجو به سئو سایت لطمه نمیزنه؟؟؟ چون در این مدل جستجو، مقدار impression میره بالا ولی...
۱۳۹۹/۱۰/۱۹
form mahdi
در:
سلام استاد عزیز ، پس بنظرتون بجای وقت گذاشتن برای یادگیری لاراول و وردپرس ، وقت بزارم که عمیق تر php و ساختار mvc...
۱۳۹۹/۱۰/۱۹
form علی
در:
سلام و ممنون بابت وبسایت عالیتون داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد...
۱۳۹۹/۱۰/۱۸
form محمد
در:
سلام خدمت شما دوست عزیز سوالم این بود میخاستم چندتا مثال از این تابع و چند تابع دیگه از خودتون رو برام مثال بزنید...
۱۳۹۹/۱۰/۱۸
form محمود رنجبر
در:
سلام برادر مشکل من تو همین سایتی هست که فرستادم وقتی گزینه خانه رو کلیک میکنم و بعد دکمه بک گوشی رو میزنم بالای صفحه...
۱۳۹۹/۱۰/۱۷
form mahdi
در:
سلام استاد عزیز ، بعد از آموزس php با لاراول کار کنیم بهتره ؟
۱۳۹۹/۱۰/۱۶
form رضا
در:
آدرس رو براتون گذاشتم دامنه قبلا روی یه وبلاگ میهن بلاگ بود چند ماه میشه که از میهن بلاگ خداحافظی کردم ولی هنوز که هنوزه...
۱۳۹۹/۱۰/۱۴
form نیلو
در:
سلام... ببخشید بعد طراحی قالب قالب شیشه ایم هست یا نه؟؟؟
۱۳۹۹/۱۰/۱۳
form مجتهدزاده
در:
سلام من یه فرمی طراحی کردم که توش قراره تعداد زیاد (حدود 10 الی 50) فیلد رو تو دیتابیس اینسرت کنم. آیا باید...
۱۳۹۹/۱۰/۰۸
form مجتهدزاده
در:
سلام لطفا راهنمایی بفرمایید که چه زمانی قبل از متغیر @ استفاده می شه و کاربردش چیه؟ با تشکر
۱۳۹۹/۱۰/۰۶
form ali
در:
سلام چجوری میشه با php بازی هوب رو طراحی کرد
۱۳۹۹/۱۰/۰۶
form رضا
در:
سلام ممنون از سایت خوبتون ایکون سایتم رو توی دسکتاپ درست نشون میده ولی تو گوشی مشکل داره طبق اموزش شما هم انجام دادم...
۱۳۹۹/۱۰/۰۶
form فرانک دستان
در:
سلام من خیلی دوست دارم روی وبلاگم کد اهنگ بزارم ولی هیچ کدوم نمی یاد بهم گفتن از این کدها دیگه پشتیبانی نمی شه شما...
۱۳۹۹/۱۰/۰۵
form مصطفی
در:
سلام. عملگر @ چه زمانی قبل از یک متغییر میاد؟
۱۳۹۹/۱۰/۰۵
form سما
در:
سلام من وقتی میزنم روی مشاهده وبلاگ صفحه فیلتر برام میاد و نمیتونم وبلاگمو ببینم
۱۳۹۹/۱۰/۰۵
form مجتبی
در:
سلام من وبلاگ بلاگفا دارم کدها و جاوا استیکرها رو میزارم تو قسمتشون ولی همه ی کدها رو یکطرف وبلاگ نشون میده چطوری سمت...
۱۳۹۹/۱۰/۰۵
form matin asadi
در:
سلام ممنون بابت سایت خوبتو من یه مشکلی دارم می خواستم کدی برای این مثال زیر بنویسم ولی بلد نیستم ممنون میشم کمک کنید. ...
۱۳۹۹/۱۰/۰۲
form sahar1999
در:
سلام وقت بخیر چطور میتونم در برنامه نویسی سی شارپ هنگام ایجاد پایگاه داده ی MySql نام پایگاه داده رو از txetbox دریافت کنم؟
۱۳۹۹/۱۰/۰۱
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.