چگونه از ابتدا یک قالب وردپرس ایجاد کنیم

Summarize this content to 400 words in Persian Lang

فهرست مطالب

Why Go Custom?
Step 1: Set Up a Local Development Environment
Step 2: Creating Your Theme Folder
Step 3: Essential Files – Getting the Bare Bones Ready
Step 4: Adding Header and Footer Templates
Step 5: Enqueueing Styles and Scripts
Step 6: Registering Menus and Widget Areas
Step 7: Testing and Debugging
Conclusion

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا برو سفارشی؟

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

مرحله 1: ایجاد یک محیط توسعه محلی

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

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

وقتی یکی را نصب کردید، خود وردپرس را بگیرید. دانلود وردپرس و آن را در فهرست XAMPP یا Flywheel خود باز کنید.

مرحله 2: پوشه تم خود را ایجاد کنید

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

مرحله 3: فایل های ضروری – آماده کردن استخوان های برهنه

حداقل، یک قالب وردپرس برای کار کردن به دو فایل نیاز دارد: style.css و index.php.

1. style.css

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

/*
Theme Name: Custom Theme
Theme URI: http://yourwebsite.com/
Author: Your Name
Author URI: http://yourwebsite.com/
Description: A custom WordPress theme built from scratch.
Version: 1.0
*/

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

2. index.php

اینجاست که جادو اتفاق می افتد – وردپرس از این فایل برای نمایش محتوای شما استفاده می کند. یک ساختار اولیه HTML در index.php ایجاد کنید:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این نقطه شروع است. نام و توضیحات سایت را نمایش می دهد و هر پستی را که ایجاد کرده اید مرور می کند.

مرحله 4: اضافه کردن سربرگ و پاورقی قالب

بیایید با شکستن سرصفحه و پاورقی در فایل های خود از تکرار کد جلوگیری کنیم. header.php و footer.php را در پوشه تم خود ایجاد کنید.header.php

این همه چیز را تا محتوای اصلی کنترل می کند:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

footer.php

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

©

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون، index.php را به‌روزرسانی کنید تا این فایل‌ها را شامل شود:

No content found

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

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

یک فایل functions.php ایجاد کنید و موارد زیر را اضافه کنید:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

مرحله 6: ثبت منوها و مناطق ویجت

منویی برای ناوبری آسان می خواهید؟ وردپرس شما را تحت پوشش قرار داده است. در functions.php، این کد را برای ثبت یک منو اضافه کنید:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 7: تست و اشکال زدایی

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

وقتی همه چیز صاف شد، WP_DEBUG را در wp-config.php روشن کنید تا به تشخیص خطاهای PHP کمک کنید:

define(‘WP_DEBUG’, true);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

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

Why Go Custom?
Step 1: Set Up a Local Development Environment
Step 2: Creating Your Theme Folder
Step 3: Essential Files – Getting the Bare Bones Ready
Step 4: Adding Header and Footer Templates
Step 5: Enqueueing Styles and Scripts
Step 6: Registering Menus and Widget Areas
Step 7: Testing and Debugging
Conclusion

/*
Theme Name: Custom Theme
Theme URI: http://yourwebsite.com/
Author: Your Name
Author URI: http://yourwebsite.com/
Description: A custom WordPress theme built from scratch.
Version: 1.0
*/

    
    
    
    



    

        
        
    

    

        ' . get_the_title() . '';
                the_content();
            endwhile;
        else :
            echo '
No content found
';
        endif;
        ?>
    

    

    
        

        
    
        
No content found
    

 __('Primary Menu', 'custom-theme')
    ));
}

add_action('after_setup_theme', 'custom_theme_setup');

function custom_theme_widgets_init() {
    register_sidebar(array(
        'name'          => 'Sidebar',
        'id'            => 'sidebar-1',
        'before_widget' => '
',
        'after_widget'  => '
',
        'before_title'  => '
',
        'after_title'   => '
',
    ));
}
add_action('widgets_init', 'custom_theme_widgets_init');

define('WP_DEBUG', true);