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

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

قسمت اول : طرح بندی

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

یک ویرایشگر متن مناسب انتخاب کنید و کدهای خود را در آن بنویسید . کد زیر را در یک فایل وارد کنید و آن را با نام Index.html ذخیره کنید .

<html>
<head>
<title>My WordPress Theme</title>
</head>
<body>
<body>
</html>

خوب . حالا برای ایجاد طرح بندی و دادن استایل از کدهای css استفاده می کنیم . کدهای زیر را در بین دو تگ <body> و </body> قرار دهید .

<div id=”wrapper”>
<div id=”header”>
header
</div> <!– close header –>
<div id=”content”>
<div id=”main”>
main
</div> <!– close main –>
<div id=”sidebar”>
sidebar
</div> <!– close sidebar –>
</div> <!– close content –>
<div id=”footer”>
footer
</div> <!– close footer –>
</div> <!– close wrapper –>

حالا باید پیکر بندی قالب را انجام دهیم . ما فایل های قالب را به چند فایل php تقسیم می کنیم . فایل هایی که می خواهیم برای این قالب ایجاد کنیم :

* header.php — شامل هدر
* index.php — فایل اصلی ما

* sidebar.php — قسمت نوار کناری
* footer.php — پایین صفحه

با این کار ویرایش فایل ها و دستیابی به کدها آسان تر می شود .

کدهای زیر را با نام هایی که در بالای هر کد قرار داده شده ذخیره کنید .

header.php

<html>
<head>
<title>My WordPress Theme</title>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
header
</div> <!– close header –>
<div id=”content”>

index.php

<div id=”main”>
main
</div> <!– close main –>

sidebar.php

<div id=”sidebar”>
sidebar
</div> <!– close sidebar –>

footer.php

</div> <!– close content –>
<div id=”footer”>
footer
</div> <!– close footer –>
</div> <!– close wrapper –>
</body>
</html>

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

دانلود فایل با حجم ندارد - بدون لینک دانلود

پسورد و منبع : www.iranhex.com

کپی برداری از مطالب سایت بدون ذکر منبع غیر مجاز است .

۱۴ دیدگاه برای این مطلب ارسال شده است.

diho

۱۴ آبان

مرسی،مطالب خوبی بود و من مشتاقانه بقیه اموزشتون رو دنبال میکنم!

[پاسخ]

بوسسسسس کنم

[پاسخ]

محسن

۲۸ خرداد

سلام من با استفاده از مجموعه ی آموزشات شما یه قالب رو ترجمه کردم به فارسی که البته خیلی مشکل داره چون اصلا حروف فارسی نشون داده نمیشه لطفا راهنماییم کنید.
نمونه قالبم هم اینجاست;cent.gigfa.com

[پاسخ]

محمد رضا محمودی پاسخ در تاريخ خرداد ۲۸م, ۱۳۹۰ ۱:۲۸ ب.ظ:

سلام باید اینکدش رو UTF-8 کنید

[پاسخ]

محسن پاسخ در تاريخ خرداد ۲۸م, ۱۳۹۰ ۲:۰۳ ب.ظ:

خیلی حیلی خیلی ممنون

[پاسخ]

محسن پاسخ در تاريخ خرداد ۲۸م, ۱۳۹۰ ۲:۰۹ ب.ظ:

فقط یه چیزی چطوری راست به چپش کنم؟

[پاسخ]

محمد رضا محمودی پاسخ در تاريخ خرداد ۲۸م, ۱۳۹۰ ۴:۱۰ ب.ظ:

چی رو؟