0 تا 100 ساخت برگه هایی با قالب سفارشی در وردپرس

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

ساخت صفحه سفارشی در وردپرس

به طور کلی وردپرس یک سیستم مدیریت محتوای قدرتمنده و به شما این امکان را می‌دهد که پست های مختلفی را بسازید. قالب وردپرسی شما ظاهر صفحه شما را با به‌کار بردن قالبی بنام page.php کنترل می‌کند. این tamplate همه اکثر برگه‌های شما را تحت تأثیر قرار می‌دهد. این صفحات سفارشی معمولاً ظاهرشان با ظاهر بقیه صفحات سایت متفاوت است، معمولاً رنگ‌بندی، چیدمان، نوع جمله بندیی‌ها و غیره متفاوت است. به این صفحات، صفحه سفارشی می‌گویند. ساختن یک برگه سفارشی در وردپرس نیاز به یک درک مقدماتی از HTML, CSS و PHP دارد. طبق گفته‌ها بیایید اولین برگه سفارشی‌تان را در وردپرس بسازیم.

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

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

روند ساخت یک برگه سفارشی

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

<?php /* Template Name: vebeetHome */?>

بعد از اینکه آن فایل را ساختید ، لازم است که این فایل را به سایت خود اضافه کنید . برای اینکار به پوشه قالب فعلی‌تان یا child theme بروید. شما آن را در /wp-content/themes/ به‌طور مستقیم پیدا می‌کنید. سپس tamplate برگه سفارشی را درتم خود آپلود کنید. حالا شما نیاز دارید که وارد پنل مدیریت وردپرس شوید تا یک برگه جدید بسازید یا برگه‌ای که از قبل وجود داشته را اصلاح کنید. در صفحه اصلاح قسمت  ‘Page Attributes’ را پایین بکشید و شما منوی قالب را پیدا خواهید کردید. روی آن کلیک کنید تا قالبی که ساخته‌اید را انتخاب کنید. حالا اگر قالب را عوض کردید و از صفحه دیدن کردید حالا شما یک صفحه خالی می‌بینید این موضوع به این خاطر است که قالب شما خالی است و به وردپرس نمی‌گوید چه چیزی نشان دهد.

ادیت و ویرایش قالب برگه سفارشی شما !

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

<?php /* Template Name: vebeetHome */ ?>

<?php get_header(); ?>

<div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">
 <?php
 // Start the loop.
 while ( have_posts() ) : the_post();

 // Include the page content template.
 get_template_part( 'template-parts/content', 'page' );

 // If comments are open or we have at least one comment, load up the comment template.
 if ( comments_open() || get_comments_number() ) {
 comments_template();
 }

 // End of the loop.
 endwhile;
 ?>

 </main><!-- .site-main -->

 <?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>