آشنایی با مفهوم Template Hierarchy در وردپرس

طراحی قالب وردپرس آنچنان کار سخت و پیچیده ای نخواهد بود اگر بتوانید با یکسری از اصول و استراکچرهای اولیه آن ارتباط برقرار کنید، اما قبل از ورود به مقوله توسعه قالب(Theme Development) بهتر است با مفهوم Template Hierarchy یا سلسه مراتب قالب آشنا شوید.

در این مفهوم واژه Template(قالب، تم، پوسته) به ساختاری اشاره می کند که در آن مجموعه ای از فایل های PHP و CSS با یکدیگر همکاری می کنند تا بتوانند یک رابط گرافیکی(UI) مناسب را به بازدیدکنندگان سایت ارائه دهند، به عبارت دیگر قالب وردپرس چیزی نیست جز تعدادی فایل که با عنوان “Template File” یا “فایل قالب” شناخته می شوند.

برای درک بهتر موضوع به دایرکتوری تم های وردپرس در مسیر wp-content/themes/ مراجعه کنید، به عنوان نمونه در تصویر زیر ساختار قالب Twenty Seventeen نشان داده شده است:

پوشه قالب های وردپرس

همانطور که ملاحظه می کنید در قالب ۲۰۱۷ تعدادی Template File وجود دارد که نامشان بر اساس یکسری قرارداد نام گذاری مشخص شده است، این بدان معناست که برای توسعه قالب باید از ساختارهای مشخص و از پیش تعریف شده استفاده کنید.

قابل توضیح نیست که هر کدام از این فایل ها وظیفه خاصی را بر عهده دارند، به عنوان مثال از single.php برای مشاهده پست ها، search.php برای نشان دادن نتایج جستجو و index.php برای پیاده سازی صفحه اصلی سایت استفاده می شود.

فایل های قالب وردپرس

و اما واژه Hierarchy(هایراکی) دقیقا به چه معناست؟

در ساده ترین تعریف هایراکی را به صورت ساختار شرطی از “If … Then … Else” های تو در تو(Nested) در نظر بگیرید، اینکه در صورت وقوع شرایط مختلف کدام Template File باید فراخوانی گردد و خروجی مدنظر ما را تولید نماید به ساختار Hierarchy بستگی دارد.

if ( condition is true ) {
	// do this here…
} elseif {
     // do this here…
} else {
	…
}

برای درک بهتر موضوع کار را با یک مثال آغاز می کنیم:

فرض کنید بازدیدکنندگان وب سایت تان برای مشاهده اطلاعات پروفایل و سایر مقالات نویسنده یکی از مطالب بر روی تصویر وی کلیک کرده و به آدرس “https://startuptuts.com/author/yavarnia” منتقل می شوند.

اول از همه ساختار هایراکی به دنبال فایلی با نام author-yavarnia.php می گردد تا آنرا به بازدیدکننده نشان دهد، در صورتی که فایل مربوطه را پیدا نکند به دنبال author.php می گردد. این عملیات همچنان ادامه دارد و در صورتی که author.php در قالب سایت موجود نباشد فایل archive.php مورد جستجو قرار می گیرد و اگر این فایل هم پیدا نشود index.php رندر شده و به عنوان نتیجه کار باز گرداننده می شود.

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

ساختار هایراکی قالب نویسنده را به ترتیب زیر جستجو می کند:

  1. author-{nicename}.php
  2. author-{id}.php
  3. author.php
  4. archive.php
  5. index.php

در تصویر زیر جزئیات ساختار سلسه مراتب قالب نشان داده شده است، برای مشاهده تصویر با کیفیت تر به wp-hierarchy مراجعه فرمائید.

ساختار هایراکی

در ادامه فایل های قالب را بررسی می کنیم:

۱- صفحه اصلی سایت(Front Pages/Home Pages)

صفحه اصلی سایت یکی از مهمترین بخش های قالب وردپرس است که به صورت زیر رندر می شود:

  1. front-page.php
  2. home.php
  3. page.php
  4. index.php

فایل index.php را به عنوان سپر بلای قالب در نظر بگیرید، در صورتی که سایر فایل ها توسط طراح ایجاد نشده باشد، index.php رندر خواهد شد، شما با همین یک فایل بعلاوه style.css می توانید قالب موردنظرتان را طراحی کنید. frontpage.php و home.php بر خلاف index.php فقط در صفحه اصلی سایت کاربرد دارند.

در  سیستم وردپرس به دو شیوه می توانید صفحه اصلی وب سایت تان را مدیریت کنید:

  • نمایش آخرین نوشته ها(Latest Posts) که گزینه پیش فرض می باشد.
  • نمایش یک صفحه استاتیک(َStatic Page)

برای مشاهده این قابلیت از قسمت تنظیمات وردپرس گزینه خواندن را انتخاب کنید(تصویر). دوستانی که از نسخه انگلیسی استفاده می کنند به مسیر Dashboard -> Settings -> Reading مراجعه نمایند.

تنظیمات خواندن وردپرس

هر کدام از گزینه های بالا باعث خواهد شد که ساختار شرطی Hierarchy به طور متفاوت اجرا گردد. اگر گزینه “آخرین نوشته ها” را انتخاب کنید آخرین پست ها و مطالب ارسالی در صفحه اصلی سایت نشان داده می شود، در صورت انتخاب گزینه “یک برگه یکتا” ساختار هایراکی به دنبال فایل های page.php یا fron-page.php می گردد.

اگر فایل front-page.php در قالب سایت وجود داشته باشد در صورت انتخاب هر کدام از گزینه ها front-page.php استفاده خواهد شد. در صورت عدم وجود فایل front-page.php و انتخاب گزینه ” آخرین نوشته ها ” یا انتخاب “برگه نوشته ها(Posts Page)” از قسمت برگه یکتا موجب فراخوانی فایل home.php می شود.

اگر از قسمت برگه یکتا گزینه “صفحه نخست (HomePage)” ست شده باشد فایل page.php نشان داده خواهد شد.

و در نهایت اگر فایل های page.php، fron-page.php و home.php در دسترس نباشند از فایل index.php برای رندر صفحه اصلی سایت استفاده می شود.

۲- قالب پست ها(Single Posts)

برای مشاهده پست ها و مطالب وردپرس مثل مقاله ای که هم اکنون در حال مطالعه آن هستید از Single Post استفاده می شود.

ساختار هایراکی قالب پست ها را به ترتیب زیر رندر می کند:

  1. single-{post-type}-{slug}.php
  2. single-{post-type}.php
  3. single.php
  4. singular.php
  5. index.php

اگر با ساختار جداول وردپرس آشنا باشید می دانید که محتوایی همچون صفحات، رسانه ها، پست ها و … در جدول  wp_posts ذخیره و نگهداری می شوند، وردپرس برای اینکه بتواند این محتوا را شناسایی و تفکیک نماید از فیلد post_type جدول فوق استفاده می کند.

یکی از ویژگی های قدرتمند وردپرس امکان ایجاد صفحات اختصاصی به ازای پست تایپ ها و نامک(slug) های یکتا است، برای درک بهتر موضوع فرض کنید که مدیر یک فروشگاه آنلاین لباس هستید و محصولات تان را با پست تایپ محصول(product) ثبت کردید، حال می خواهید برای نمایش پیراهن ها یک صفحه اختصاصی با اسلاگ shirts طراحی کنید، برای انجام اینکار می توانید از ساختار زیر استفاده کنید:

single-product-shirts.php

و اگر می خواهید برای پست تایپ محصولات قالب جداگانه ای به بازدیدکنندگان نشان دهید ار ساختار زیر استفاده نمائید:

single-product.php

در صورتی که در قالب سایت فایلی با ساختار single-product-shirts.php وجود نداشته باشد هایراکی به دنبال single-product.php می گردد. در صورت عدم وجود این فایل ها single.php فراخوانی خواهد شد، لازم به ذکر است که singular.php از وردپرس ورژن ۴٫۳ اضافه شده است، اگر single.php پیدا نشود فایل singular.php نشان داده می شود، در نهایت اگر هیچکدام از موارد بالا پیدا نشود فایل index.php فراخوانی می گردد.

۳- قالب صفحات(Single Pages)

از قالب صفحات برای نمایش محتوایی با پست تایپ page استفاده می شود، صفحات به شما اجازه می دهد مواردی مثل صفحه درباره ما، تماس با ما و … را ایجاد کنید. ساختار هایراکی برای رندر قالب های این بخش به ترتیب زیر عمل می کند:

  1. page templates
  2. page–{slug}.php
  3. page-{id}.php
  4. page.php
  5. singular.php
  6. index.php

اگر به گزینه اول دقت کرده باشید(page templates) هیچگونه ساختار مشخصی برای آن تعریف نشده است، این بدان معناست که می توانید قالب های متفاوتی تعریف کرده و آنها را به صفحات موردنظرتان متصل نمائید. برای انجام اینکار کافی است یک فایل php با نام دلخواه در قالب سایت ایجاد کرده و از کدهای زیر استفاده کنید:

<?php
/* Template Name: CustomPageTemplate1 */
//your code here ...
?>

قالب صفحات وردپرس

۴- قالب دسته بندی(Category)

صفحات دسته بندی هم دقیقا به همان شیوه صفحات نویسنده عمل می کنند. به عنوان مثال اگر به آدرس “https://startuptuts.com/category/wordpress-tutorials” مراجعه کنید(تصویر)، به طور پیش فرض فایل archive.php فراخوانی خواهد شد. اما با ایجاد category.php مسیر گزینش فایل تغییر پیدا خواهد کرد و این فایل به جای archive.php رندر می شود. در نهایت به کمک category–{slug}.php و category-{id}.php می توانید یک دسته خاص را مشخص کنید.

ساختار سلسه مراتبی صفحات دسته بندی به صورت زیر می باشد:

  1. category–{slug}.php
  2. category-{id}.php
  3. category.php
  4. archive.php
  5. index.php

دسته بندی موضوعی وردپرس

۵- قالب تگ(Tag)

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

  1. tag-{slug}.php
  2. tag-{id}.php
  3. tag.php
  4. archive.php
  5. index.php

به عنوان نمونه در تصویر زیر پس از کلیک بر روی گزینه “وردپرس پیشرفته” فایل tag.php فراخوانی شده است.

فایل قالب تگ ها در وردپرس

۶- قالب پست تایپ سفارشی(Custom Post Type)

همانطور که می دانید وردپرس از ۵ پست تایپ پیش فرض Post ،Page ،Attachment ،Revision و Navigation Menu برای مدیریت محتوای خود استفاده می کند، شما می توانید به این مجموعه پست تایپ موردنظرتان را اضافه کنید. برای درک این موضوع فرض کنید که می خواهید اطلاعات کارمندان یک شرکت را ثبت کنید، برای این منظور می توانید یک پست تایپ با نام co_worker تعریف کرده و اطلاعات شخصی آنها را با این نوع جدید ثبت نمائید.

پس از آن با ایجاد فایل archive-co_worker.php یا single-co_worker.php می توانید به ازای هر post_type صفحه اختصاصی طراحی کنید.

ترتیب رندر شدن این نوع از صفحات به صورت زیر می باشد:

  1. archive-{post_type}.php
  2. archive.php
  3. index.php

۷- صفحه نتایج جستجو(Search Results Page)

کاملا گویا است که این نوع از صفحات به منظور نمایش نتایج جستجو استفاده می شود و ترتیب رندر شدن آنها نیز به صورت زیر می باشد:

  1. search.php
  2. index.php

در صورتی که صفحه search.php وجود نداشته باشد فایل index.php فراخوانی می شود.

۸- قالب خطای ۴۰۴(Not Found)

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

ترتیب اجرا شدن نیز به صورت زیر خواهد بود:

  1. php.404
  2. index.php

قالب های جزئی(Template partials)

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

این الگوها شامل:

  1. header.php برای ایجاد هدر سایت
  2. footer.php برای ایجاد فوتر
  3. sidebar.php برای ساید بار

جمع بندی

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

نظرات و سوالات کاربران

پاسخی بگذارید

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