روش ایجاد قالب وردپرس: فرآیند 5 مرحله ای با کد

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

• <?php the_permalink(); ?> – URL صحیح پست واقعی را خروجی می دهد.
• <?php the_title_attribute(); ?> – عنوان پست را در قالب ایمن برای ویژگی عنوان پیوند نمایش می دهد.
• <?php the_title(); ?> – عنوان پست را نشان می دهد.
• <?php the_author(); ?> – خروجی نام نویسنده.
• <?php the_excerpt(); ?> – گزیده ای از پست را انجام می دهد که در صورت عدم نوشتن خود، به صورت خودکار تولید می شود.

در مورد وردپرس بیشتر یاد خواهیم گرفت برچسب های قالب و حلقه ها بعد.

footer.php

این فایل جایی است که باید پاورقی هر کدام را تعریف کنید page. هر کدام را می بندد <بدن> و تگ هایی که هنوز از طرف باز هستند header.php فایل. بدون این فایل PHP، هنگام بازدید از خود متوجه خواهید شد که نوار مدیریت از دست رفته است homepage، پست ها یا صفحات.

پاورقی خود را با استفاده از عنصر معنایی HTML5 تعریف کنید

. برای اطمینان از اینکه کد نهایی وردپرس و جاوا اسکریپت به آن اضافه شده است page، باید شامل wp_footer() عمل hook همچنین.

<footer>
      <p>Copyright &copy; 2019</p>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

با ذخیره این فایل، هر تگ HTML باز موجود در فایل های قالب دیگر بسته می شود.

در مورد آن بیشتر صحبت خواهیم کرد قلاب های اکشن در ادامه این آموزش

single.php

را single.php فایل طرح تک پست ها را دیکته می کند روی وبسایت شما. می تواند کاملا متفاوت از index.php.

در اینجا، ما استفاده خواهیم کرد محتوای() عملکرد نمایش پست کامل با این حال، ما نوار کناری را به پست ها اضافه نمی کنیم و لینک را حذف می کنیم روی عنوان نیز

کد کامل PHP باید به شکل زیر باشد:

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
       <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no post was found!</p>
      </article>
<?php endif; ?>
  </section>
</main>
<?php get_footer(); ?>

پس از ذخیره، پست های شما به صورت تک نمایش داده می شود page بدون نوار کناری

pagephp

را pagephp فایل روش نمایش صفحات را توضیح می دهد. می تواند با نمایه و طرح پست متفاوت باشد.

برای اینکه تفاوت ها بیشتر نمایان شود، یک بار دیگر نوار کناری را به این طرح اضافه می کنیم و آن را ایجاد می کنیم page مصرف محتوا 70% از page عرض

کد زیر را به pagephp فایل:

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no page was found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

پس از ذخیره، یک طرح بندی اختصاصی برای صفحات خود خواهید داشت.

5. طراحی خود را بهبود بخشید روی صفحه سبک CSS

در قسمت قبل به استایل شیت CSS اشاره کردیم. این فایل طراحی و چیدمان وب سایت شما را کنترل می کند. از آنجایی که قبلاً مقداری کد به فایل اضافه کرده‌ایم، اکنون می‌خواهیم طرح را اصلاح کنیم.

این کار را با اضافه کردن کد زیر در پایین صفحه انجام دهید style.css فایل:

.my-logo,
footer {
  width: 100%;
  padding-left: 1%;
  margin-bottom: 8px;
  background-color: #78baff;
  border: 1px solid #78baff;
}

body > header > h1 > a {
  color: #ffffff;
  font-weight: 400;
}

article > header {
}

footer {
  margin-top: 4px;
}

a {
  text-decoration: none;
}

/* 'Margin: 0 auto' centers block content روی the page */
.wrap {
  width: 99%;
  margin: 0 auto;
}

.content-area {
  display: inline-block;
}

.content-thin {
    width: 70%;
}

.content-full-width {
    width: 100%;
}

.content-area,
.primary-sidebar {
  display: inline-block;
}

.primary-sidebar {
  width: 25%;
  padding: 1%;
  vertical-align: top;
  background-color: #ececec;
}

.article-loop {
    width: 45%;
    text-align: left;
    margin: 5px;
    padding: 10px;
}

.article-full {
  width: 99%;
  padding: 1%;
}

.article-loop,
.article-full {
  display: inline-block;
  vertical-align: top;
  background-color: #FFF;
  border-radius: 4px;
  margin-bottom: 4px;
}

پس از ذخیره، باکس های مختلف دارای پس زمینه سفید و حاشیه آبی می شوند.

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

استفاده از پرسش های رسانه ای

پرس و جوهای رسانه ای برای تغییر ظاهر وب سایت وردپرسی شما بسته به آن مفید هستند روی نوع دستگاه، وضوح صفحه یا عرض درگاه دید مرورگر. ویژگی پرس و جوهای رسانه ای در شیوه نامه CSS شما را تعریف می کند page ارائه در هنگام تغییر پورت نمایش

فرض کنید دو کادر متنی کنار هم دارید که 50 درصد از صفحه را اشغال می کنند. با کوچکتر شدن پنجره مرورگر، جعبه‌ها به‌طور خودکار تنظیم می‌شوند تا 50 درصد از پنجره را اشغال کنند، به‌جای ناپدید شدن از کنار.

اگر پنجره مرورگر برای نمایش درست تمام متن در آن کادرها خیلی کوچک است، می‌توانید کاری کنید که 100 درصد اندازه پنجره را اشغال کرده و یکی را نشان دهید. روی بالای دیگری

از آنجایی که طرح اولیه ما دارای دو جعبه درون خطی است روی جلو-page، هنگامی که پنجره مرورگر برای نمایش متن بسیار کوچک است، به راحتی می توانیم رفتار آنها را تغییر دهیم.

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

برای این منظور، از برخی قوانین ویژگی رسانه استفاده خواهیم کرد، مانند:

• حداکثر عرض – حداکثر عرض ناحیه قابل مشاهده مرورگر را مشخص می کند.
• عرض دقیقه – حداقل عرض ناحیه قابل مشاهده را تعیین می کند.
• گرایش – بررسی می کند که آیا صفحه در حالت عمودی یا افقی قرار دارد.

لیست کامل ویژگی های رسانه را ببینید روی را وب سایت شبکه توسعه دهندگان موزیلا.

ابتدا یک پرسش رسانه ای می نویسیم که بر روی آن تأثیر می گذارد .article-loop کلاس بیان می کند که اگر عرض پنجره مرورگر کوچکتر از 800 پیکسل باشد، .article-loop کلاس باید از 99 درصد فضای موجود استفاده کند.

بنابراین، درخواست رسانه فقط باید روی صفحه‌ها و پنجره‌های مرورگر با عرض 800 پیکسل یا کمتر تأثیر بگذارد.

در پایان از .article-loop کلاس، موارد زیر را اضافه کنید:

@media screen and (max-width: 800px) {
  .article-loop {
    width: 99%;
  }
}

بعد از اینکه تغییرات را ذخیره کردید، به قسمت زیر بروید homepage از وب سایت شما اندازه مرورگر خود را تغییر دهید، و با گذشتن از عرض 800 پیکسل، می‌بینید که کادرهای هر پست تغییر کرده و یکی زیر دیگری می‌افتند.

ما پرس و جو رسانه بعدی را به همین ترتیب اضافه خواهیم کرد. به محتوای اصلی و نوار کناری دستور می دهد که 100٪ از فضای موجود را اشغال کند. اگر پهنای پنجره مرورگر کمتر از 400 پیکسل باشد، نوار کناری به زیر محتوای اصلی می‌افتد.

در اینجا کد باید شبیه به آن باشد:

@media screen and (max-width: 400px) {
  .content-area,
  .primary-sidebar {
    width: 100%;
  }
}

طراحی ریسپانسیو چیست؟

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

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

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

برای اندازه‌گیری یک هم‌ترازی واکنش‌گرا برای طراحی خود، باید طرح‌بندی وب‌سایت خود را به‌عنوان یک سری شبکه‌ای به جای پیکسل (px) در نظر بگیرید. سپس، عرض شبکه‌ها را برای هر بخش محتوا بر حسب درصد (%) تقسیم کنید.

برای تصاویر، می توانید آنها را روی حداکثر عرض: 100٪ اندازه واقعی و ارتفاع آنها را روی خودکار تنظیم کنید. هنگامی که اندازه صفحه نمایش باریک شود، عرض و ارتفاع تصویر به طور خودکار تنظیم می شود. بنابراین، اگر یک تصویر با عرض 200 پیکسل در داخل a قرار دهید بخش که 100% صفحه را اشغال می کند، در عرض واقعی خود باقی می ماند.

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

/* GOOD WIDTH */
.inline-text-box {
  width: 50%;
}

/* BAD WIDTH */
.inline-text-box {
  width: 800px;
}

/* GOOD IMAGE */
img {
  max-width: 100%;
  height: auto;
}

/* BAD IMAGE */
img {
  width: 100%;
  height: auto;
}

با در نظر گرفتن این موضوع، بیایید این اصول طراحی وب ریسپانسیو را برای ایجاد یک تم وردپرس با HTML5 و CSS3 اعمال کنیم.

برچسب ها، حلقه ها و قلاب های اکشن قالب وردپرس چیست؟

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

برچسب های قالب

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

اگر می خواهید پاورقی را نشان دهید روی خانه page اما نه روی هر دیگری page، اضافه کردن get_footer() در پایین index.php فایل اما نه در pagephp فایل. به خاطر داشته باشید که برخی از تگ های قالب باید در حلقه وردپرس استفاده شوند تا به درستی کار کنند.

در زیر دو لیست کوتاه از برخی از برچسب‌های قالب ضروری وجود دارد تا به شما ایده دهد که کدام یک از آنها در دسترس هستند.

برچسب های قالبی که شامل فایل های PHP می شوند:

• get_header() – شامل header.php قالب.
• get_sidebar() – تماس می گیرد نوار کناری.php قالب.
• get_footer() – خطاب به footer.php قالب.
• get_search_form() – شامل searchform.php قالب.

تگ های قالبی که اطلاعات را از پایگاه داده نمایش می دهند:

• وبلاگ اطلاعات () – نمایش اطلاعات درخواست شده در پارامتر، مانند وبلاگ اطلاعات (“نام”) که نام وب سایت شما را نشان می دهد.
• single_post_title() – عنوان پست مشاهده شده را در صورت استفاده در single.php فایل.
• نویسنده() – نویسنده پست مشاهده شده را نشان می دهد.
• محتوای() – خروجی متن اصلی یک پست یا page.
• the_excerpt() – گزیده ای از هر پست یا صفحه را نمایش می دهد.

برای لیست کامل برچسب های قالب وردپرس، وردپرس رسمی را بررسی کنید کدکس.

حلقه وردپرس

حلقه وردپرس مجموعه ای از کد است که هر پست درخواستی را بازیابی می کند. کد HTML درون حلقه هر پست درخواستی را نمایش می دهد روی یک تک page – این یک پست یا همه پست های منتشر شده شما خواهد بود.

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

مثال پیش‌فرض وردپرس به این صورت است، و خط نظردهی جایی است که تگ‌های HTML و قالب شما نوشته می‌شود:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
// HTML and template tags here to define the layout, and what is shown from the post
<?php endwhile; else : ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

اگر می خواهید یک پست نمایش دهید، از آن استفاده کنید محتوای() تگ قالب در داخل حلقه برای نمایش محتوای پست. در ضمن اگر بخواهید لیستی از تمامی پست های منتشر شده نمایش داده شود می توانید از آن استفاده کنید the_excerpt() داخل حلقه

قلاب های اکشن

قلاب های وردپرس توابع PHP هستند که برای دستکاری a استفاده می شوند process بدون ویرایش فایل های اصلی دو نوع قلاب موجود است – اکشن و فیلتر. قلاب های فیلتر برای اصلاح کد موجود در سیستم استفاده می شود function.php فایل.

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

در قالب هدر موضوع شما، wp_head() عمل hook نامیده می شود تا سربرگ پیش فرض HTML وردپرس را در داخل قرار دهد برچسب ها در بخش پاورقی تم ها، wp_footer() عمل hook فراخوانی می شود تا HTML و جاوا اسکریپت پیش فرض را شامل شود و هر توابعی که توسط افزونه ها به آن متصل شده است را اجرا کند.

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

مثلا زنگ نزدن wp_footer() در شما footer.php قالب بالا را متوقف خواهد کرد مدیر هنگامی که شما به عنوان یک مدیر وارد سیستم شوید، نوار نمایش داده نمی شود.

این به این دلیل است که کد اصلی وردپرس که نوار مدیریت را نشان می دهد به آن متصل است wp_footer() عمل hook. از این رو، توابع مرتبط بدون آن نمی توانند اجرا شوند.

نتیجه

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

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

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

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

روش ایجاد یک تم وردپرس پرسش و پاسخ

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