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

11 اسفند 1398
wordpress-theme-developement-1

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

هنگام اجرا و استفاده از وردپرس خواهید دید که قالب های رایگان زیادی وجود دارد. فراتر از موارد رایگان، قالب هایی با قابلیت ارتقا به نسخه ی حرفه ای نیز وجود دارند که ممکن است آن ها را انتخاب نمایید. این قالب ها بسیار جذابند و از ویژگی های خارق العاده ای برخوردار می باشند. پس چرا به آموزش ساخت قالب وردپرس می پردازیم و آن را فرا می گیریم؟! پاسخ این است: مهم نیست که از چه قالبی استفاده می کنید، زمانی فرا می رسد که نیاز به تغییرات ساده در وب سایت خود دارید. شاید بگویید که تغییرات در وب سایت را می توان با افزونه ها انجام داد اما با این رویکرد و این نوع نگاه، بعد از مدت کوتاهی وب سایت شما به یک انبار افزونه تبدیل می شود که این افزونه ها بی ضرر هم نیستند. تنها با داشتن اندکی دانش و اطلاعات بنیادی از قالب های وردپرسی، می توانید با خیال راحت قالب وب سایت خود را سفارشی سازی کنید. در این حالت کاملا می دانید که باید کدام فایل را ویرایش کنید و برای رسیدن به نتیجه ی دلخواه خود می توانید کدی را اضافه کرده یا حذف کنید.

قدم اول: یک پوشه برای نگهداری فایل های خود ایجاد کنید

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

php storm

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

فایل ها

  • composer.json
  • index.php
  • license.txt
  • readme.html
  • wp-activate.php
  • wp-blog-header.php
  • wp-comments-post.php
  • wp-config.php
  • wp-config-sample.php
  • wp-cron.php
  • wp-links-opml.php
  • wp-load.php
  • wp-login.php
  • wp-mail.php
  • wp-settings.php
  • wp-signup.php
  • wp-trackback.php
  • xmlrpc.php

پوشه ها

  • wp-admin
  • wp-content
  • wp-includes

فولدر یا پوشه ای که ما فعلا روی آن تمرکز زیادی داریم wp-content است. درون پوشه ی wp-content پوشه ی دیگری با نام themes وجود دارد. حتما تا الان حدس زده اید که این پوشه به چه دردی می خورد. بله درست است! ما قالب هایی را که می خواهیم در وب سایت وردپرسی خود استفاده کنیم را درون پوشه themes قرار می دهیم. درون این پوشه، سه عدد پوشه ی دیگر هم هست که معمولا نامی شبیه به twentytwenty دارند. این فولدرها همان قالب های پیش فرض وردپرس هستند.

خب! پس از نصب وردپرس روی هاست مورد نظر خود (ما در این آموزش از نرم افزار phpstorm استفاده می کنیم)، یک پوشه ی جدید با نام custumtheme ایجاد کنید. نام این پوشه، نام قالب جدید ما است که می خواهیم الان از صفر ایجادش کنیم.

پوشه ی مربوط به تم ها

قدم دوم: ایجاد فایل style.css و index.php در پوشه ی قالب خود

حالا می دانیم که فایل های یک قالب در کجای سیستم وردپرس قرار دارند. همچنین یک فولدر با نام customtheme درون فولدر مربوط به قالب ها ساختیم. اکنون می خواهیم که دو عدد فایل خالی درون customtheme ایجاد کنیم. یکی با نام index.php و دیگری با نام style.css . همانند شکل زیر.

افزودن فایل ها

حالا بیایید حداقل کد لازم برای هر یک از این کدها را تعیین کنیم. حداقل کدی که با نوشتن ان ها، پوشه customtheme ما به یک قالب واقعی تبدیل می شود.


فایل style.css

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

فایل style.css برای ساخت تمام قالب نیاز است. این فایل کنترل کننده و تعیین کننده ی نحوه ی نمایش اطلاعات ( از نظر دیزاین و طرح بندی ) می باشد.

قطعه کد زیر را در فایل style.css قرار دهید. با استفاده از قطعه کد زیر، به سادگی نام قالب، نام سازنده ی قالب، آدرس اینترنتی مربوط به سازنده و ورژن قالب را تعیین می کنیم.

/*
Theme Name: customtheme
Author: Vegibit
Author URI: https://vegibit.com
Version: 1.0
 */

فایل index.php

در این فایل فقط می خواهیم یک کلمه خاص را نمایش دهیم تا ثابت کنیم که قالب ما به درستی کار می کند. کد زیر را در فایل index.php قرار دهید.

<h1>Custom Theme!</h1>

بسیار خب! باور کنید یا نکنید، الان اولین قالب وردپرسی خود را ساختید.

فایل style.css برای ساخت تمام قالب نیاز است. این فایل کنترل کننده و تعیین کننده ی نحوه ی نمایش اطلاعات ( از نظر دیزاین و طرح بندی ) می باشد.

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

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

قالب اولیه وردپرس - آموزش ساخت قالب وردپرس

می توانیم بر روی گزینه ی جزئیات پوسته یا theme details کلیک کنیم و اطلاعات مربوط به قالب خود را ببینیم. همان جزئیاتی که در فایل style.css وارد کردیم. همان طور که مشاهده می فرمایید، قالب ما نام customtheme را به خود گرفته است، ورژن آن 1.0 است و اطلاعات نویسنده هم نمایش داده می شود. (به به! شکلو ببین!)

اطلاعات قالب - آموزش ساخت قالب وردپرس

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

نمایش قالب یا پوسته - آموزش ساخت قالب وردپرس

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


منبع: سایت Vegibit

نویسنده شوید
دیدگاه‌های شما (3 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

فرید طباطبایی
04 شهریور 1401
سلام خواستم تشکر کنم از وب سایت خوبتون ، راستش خیلی زیاد گشتم تا به اینجا رسیدم از بین این همه فیلم آموزشی و مقاله و غیره تصمیم گرفتم اینجارو انتخاب کنم ، مشخصه که هم حرفه ای هستید و هم خیلی آموزش خوبی تهیه کردید ، واقعا ممنونم ازتون

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

محمد
26 دی 1399
سلام. این آموزش شما خیلی مفید بوده، ممنون. لطفاً توضیحات بیشتری مثل: اضافه کردن نوار جستجو ، منوی اصلی برای موبایل و رسپانسیو بودن برای موبایل اضافه کنید

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیرحسام
22 آبان 1399
سلام . من خیل به برنامه نویسی و طراحی قالب علاقه مندم و php و java script و html و css رو هم یاد گرفتم و دو سه تا قالب برای وبلاگ های ساده (بلاگفا و...) هم طراحی کردم , اما هر چی فکر میکنم نمیتونم بفهمم که چیجوری باید قالب وردپرس بسازیم ! من تا الان تجربه ساخت قالب وردپرسی رو نداشتم و نمیدونم اون همه کد و فایل html که در قالب های وردپرس هست , دقیقا کاربردشون کجاست و چیکار میکنن . میخواستم بدونم شما دوره ای یا ویدیویی نمیشناسین که بهمون یاد بده این چیزارو؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.