حساب کاربری جی کوئریحساب کاربری به صورت جی کوئری + آموزش ویدیوییکلیک کنید×

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

گام پانزدهم: طراحی قالب وردپرس به شکل مبتدی – کسب درآمد چند ده میلیونی از محتوای دیجیتال

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

برای شناخت بهتر زبان های برنامه نویسی مذکور می توان یک سایت اینترنتی را به ساختار انسان تشبیه کرد. در این مثال html استخوان بندی و css ظاهر انسان محسوب می شود. علاوه بر این js به قابلیت ها و کارهای انجام شده توسط انسان نسبت داده می شود. اما html چیزی جزء مهارت نیست که باعث ساده سازی کارها توسط انسان می شود. هسته اصلی تشکیل سایت وردپرسی، زبان های کدنویسی html و PHP می باشد که باید کاربر با آنها آشنایی نسبی داشته باشد. در واقع برای طراحی قالب یک سایت وردپرسی ابتدایی برای به دو فایل نیاز است که شامل index.php و style.css می باشد.

تبدیل قالب HTML به قالب وردپرس (ریپ کردن قالب سایت)

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

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

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

  1. ذخیره کردن قالب سایت مبدأ به فرمت html
  2. ویرایش و ساده سازی کدهای موجود در قالب ذخیره شده
  3. استفاده از قالب ساده شده در وردپرس
  4. داینامیک کردن قالب
  5. ایجاد عناصر جدید برای قالب
  1. ذخیره کردن قالب سایت مبدأ به فرمت html

سایت مورد نظر را انتخاب و برای استفاده با مالک یا طراح هماهنگی های لازم را انجام دهید. سپس روی صفحه نخست سایت مربوطه کلیک راست نموده و گزینه Save as (Ctrl+S) را انتخاب کنید. بعد از تعیین محل ذخیره و انتخاب گزینه Save، یک پوشه و یک فایل با عنوان نام سایت مورد نظر ایجاد می شود. پوشه حاوی انواع فایل ها با فرمت متنی، تصویری و ... می باشد. فایل ایجاد شده نیز دارای فرمت html می باشد.

  1. ویرایش و ساده سازی کدهای موجود در قالب ذخیره شده

لازمه شروع این مرحله، نصب برنامه Notepad.Plus.Plus روی سیستم می باشد. پس از انجام نصب، فایل html ذخیره شده در مرحله قبل را یک بار با استفاده از مرورگر کروم و بار دیگر با استفاده از Notepad.Plus.Plus باز کنید. صفحه Notepad باز شده، محتوی تمامی کد های مورد استفاده در ساخت سایت مبدا است. سه بخش اصلی Body، Header، Sidebar و Footer در این صفحه از هم قابل تفکیک می باشند. شما برای ساخت قالب وردپرسی خود به همه این کدها نیاز ندارید. بنابراین لازم است که برخی از آنها حذف و برخی دیگر نگه داشته شوند.

خواندن  معرفی بخش دیدگاه ها در داشبورد وردپرس

طبیعتاً برای هر سایتی از جمله سایت انتخابی شما در قسمت Body و Sidebar چندین کادر وجود دارد. کدهای مربوط به هر کادر نیز به شکل مجزا در صفحه Notepad وجود دارد. برای هر بخش نگهداشتن کد های یک کادر کافی است و لازم است که باقی آنها حذف شوند. قاعده کلی ساده سازی این است که "کدهای اضافی تا حد امکان حذف شوند". البته در اجرای این مرحله باید توجه داشت که قالب اصلی سایت به هم ریخته نشود. برای اطمینان می توانید بعد از هر مرحله حذف، صفحه html باز شده در مرورگر کروم را Reload (Ctrl+R) کرده تا تغییرات مشاهده شود.

ساده سازی فقط مختص صفحه Notepad باز شده نیست و باید پوشه دانلود شده از صفحه نیز ویرایش شود. به همین منظور عکس های موجود در صفحه باز شده با مرورگر را در نظر گرفته و همان موارد را نگه می داریم. به این ترتیب تعداد زیادی از عکس ها به سطل زباله منتقل می شوند البته که بعد از اتمام تبدیل قالب html به وردپرس تمامی عکس ها حذف خواهند شد. بعد از تعیین تکلیف فایل های تصویری نوبت به فایل های فرخوانی شده و کد های نوشته شده توسط طراح قالب می باشد که بعضی از آن ها که با فرمت js و css می باشند و تحت هیچ شرایطی نباید حذف شوند در صورتی که کدی به اشتباه حذف شود قالب به درستی عمل نمی کند. چند نمونه کدی که نباید حذف شوند عبارتند از:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="language" content="fa_IR">
<meta name="description" content="یک سایت دیگر با وردپرس فارسی">
<title>مالتی مدیا 2 | یک سایت دیگر با وردپرس فارسی</title>
<link rel="shortcut icon" href="http://demo.p30code.com/multimedia-2/wp-content/themes/multimedia-2/img/favicon.ico" type="image/x-ico; charset=binary">
<link rel="icon" href="http://demo.p30code.com/multimedia-2/wp-content/themes/multimedia-2/img/favicon.ico" type="image/x-ico; charset=binary">
<link rel="alternate" type="appliction/rss+xml" href="http://demo.p30code.com/multimedia-2/feed/" title="آخرین مطالب">
<link rel="alternate" type="appliction/rss+xml" href="http://demo.p30code.com/multimedia-2/comments/feed/" title="آخرین نظرات">
<link type="text/css" href="http://demo.p30code.com/multimedia-2/wp-content/themes/multimedia-2/style.css" /> <link type="text/css" href="http://demo.p30code.com/multimedia-2/wp-content/themes/multimedia-2/css/style-rtl.css" /> <script type="text/javascript" src="http://demo.p30code.com/multimedia-2/wp-includes/js/jquery/jquery.js"></script> <script type="text/javascript" src="http://demo.p30code.com/multimedia-2/wp-includes/js/jquery/jquery-migrate.min.js"></script>

توجه کنید شناسایی کد هایی که باید حذف شوند یا نه، لازمه تجربه ای می باشد که بعد از چند طراحی قالب بدست آورده می شود اما باید دانست که این کد ها قبل تگ باز body (<body>) و قبل از تگ بسته footer (</footer>) می باشد. بعد از اتمام کار، صفحه باز شده در مرورگر را Reload کرده و از عدم تغییر و به هم ریختگی آن اطمینان حاصل می شود. به این ترتیب مرحله ساده سازی و ویرایش قالب ذخیره شده از سایت مبدا به اتمام می رسد. پایان کار نیز قرار دادن فایل html و محتویات باقی مانده داخل یک پوشه و در کنار هم است. فقط باید توجه داشت که برای جلوگیری از به هم ریختگی قالب، فایل هایی که فرخوانی شده نباید در قسمتی که ذخیره شده حذف شود.

  1. استفاده از قالب ساده شده در وردپرس

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

خواندن  معرفی کامل بخش برگه ها در داشبورد وردپرس

چندین نرم افزار برای ایجاد Localhost وجود دارد که قابلیت های متفاوتی دارند. رایج ترین این موارد عبارتند از:

  • XAMPP
  • Wampserver
  • Easyphp

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

C:\xampp\htdocs\wp-content\themes
Help : My Computer OR This PC > Drive (C) > XAMPP > Htdocs > WP-Content > Themes

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

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

خواندن  کسب درآمد از محتوای دیجیتال

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

گام قبلی : چهاردهم

گام بعدی : شانزدهم