چگونه پوسته وردپرس طراحی کنیم؟

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

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

طراحی پوسته وردپرس

برای شروع لازمه که:

۱- آشنایی html و css که فقط بتونید کدهارو بشناسید و استفاده کنین.

۲ – یک نرم افزار ++notepad

۳ – یک نرم افزار وب سرور مثل wampp یا xampp یا easyphp که xampp به خاطر کامل بودن بهتون پیشنهاد میشه .

پوسته  های وردپرس شامل فایل های زیر هستند:

  • Index.php : قالب صفحه اصلی
  • Header.php : کدهای سرصفحه در این فایل قرار می گیره
  • Footer.php : کدهای پاصفحه در این فایل قرار می گیره
  • Sidebar.php : کدهای ستون کناری در این فایل قرار می گیرن. البته اگر پوسته دارای ۲ ستون کناری یعنی چپ و راست بود دوفایل right-sidebar.php و left-sidebar.php ایجاد می کنیم.
  • single.php : قالب مطالب.
  • Page.php : قالب برگه ها.
  • Loop.php : قالب مطالبی که در صفحه single.php و page.php قرار می گیرن.
  • Comments.php : قالب نظرات.
  • Search.php : قالب صفحه نتایج جستجو.
  • Searchform.php : کدهای فرم جستجو.
  • Archive.php : قالب صفحه آرشیو مطالب.
  • Functions.php : توابع پوسته، دراصل با استفاده از این فایل می توان امکانات بیشتری برای پوسته ایجاد کرد. که پر استفاده ترین امکان نیز ، پشتیبانی از ابزارک هاست.
  • ۴۰۴٫php : قالب صفحه خطای ۴۰۴ (Not Found)
  • Style.css : استایل پوسته

 نرم افزار ساخت قالب وردپرس بدون کد نویسی

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

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

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

نرم افزار طراحی پوسته وردپرس Artisteer
نرم افزار طراحی پوسته وردپرس Artisteer

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

راست چین کردن قالب مورد نظر

همانند فارسی سازی قالب های وردپرس باید با کمک نرم افزار poedit رشته ها را فارسی کنید. حال برای فارسی کردن قالب یک فایل rtl.css در شاخه ی اصلی قالب می سازیم و سپس با کمک نرم افزارهایی مثل ++notepad دو فایل Style.css پوسته و فایل rtl.css که ساخته ایم را باز می کنیم و سپس در همان خط اول فایل rtl ساخته شده کد زیر را وارد می کنیم:

body { direction: rtl }

در Style.css به دنبال ” ;text-align: left” و ” ;text-align:left” بگردید. (این دو با هم فرق دارند! یک بار با فاصله و یک بار بدون فاصله است)
هر کدام را که پیدا کردیم در فایل rtl.css وارد می کنیم (کپی و پیست) و سپس left را به right تبدیل می کنیم. و موارد اضافه را حذف می کنیم. این کار را برای تمامی آنهایی که دارای این حالت هستند انجام می دهیم.

نوبت به آن رسیده که به دنبال “;float: left” و “;flaot:left” بگردیم.( یک بار با فاصله و بار دیگر بدون فاصله) تمامی مواردی که پیدا کردیم را همانند مورد بالا در rtl.css وارد کرده و left را به right تغییر می دهیم. فقط مواردی استثنا وجود دارد!

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

contentLayout .sidebar1 و contentLayout .content و contentLayout .sidebar2 و rss-tag-icon

حال به دنبال تگ “header-tag-icon” می گردیم و سپس در rtl.css وارد کرده و مواردی را نیز مانند نمونه به آن اضافه می کنیم:

background-position:right top;

سپس به دنبال کد “BlockContent-body ul li” می گردیم و آن را در rtl.css وارد کرده و مواردی را مانند نمونه به آن اضافه می کنیم:

background-position: right;

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *