میدان های کربن چیست؟
Carbon Fields یک کتابخانه رایگان وردپرس است که توسط 2 ایجاد کنید. آی تی به توسعه دهندگان قالب و افزونه وردپرس کمک می کند تا زمینه های اضافی برای انواع پست، منوهای پیمایش، ویجت ها و غیره ایجاد کنند یا حتی بلوک های گوتنبرگ سفارشی را بدون لمس جاوا اسکریپت ثبت کنند.
همانطور که خواهیم دید، در طول مسیر، با فیلدهای مختلفی مانند چک باکس، تکرارکننده (مختلط)، متن و غیره همراه است.
بنابراین، در این مرحله، اگر می خواهید این آموزش را دنبال کنید، ابتدا نصب کنید آهنگساز، سپس نصب کنید میدان های کربن با اجرای این دستور:
1 |
composer require htmlburger/carbon-fields |
صفحه گزینه های تم وردپرس چیست؟
صفحه گزینه‌های تم یک صفحه مدیریت است که خارج از صفحات پیش‌فرض وردپرس قرار دارد، جایی که توسعه‌دهندگان تنظیمات جهانی را ذخیره می‌کنند که بر عملکرد سایت یا افزونه وردپرس آنها تأثیر می‌گذارد.
برای مثال، ممکن است گزینه‌هایی برای مدیریت مواردی مانند:
- رفتار سرصفحه – چه باید چسبنده باشد یا نه.
- تنظیمات تایپوگرافی – اندازه قلم جهانی، فونت سراسری، رنگ عناوین و غیره.
زیر خط میدان های کربن
داده ها معمولاً در *_options جدول و در هر صفحه سایت موجود است.
شایان ذکر است که کتابخانه Carbon Fields هنگامی که در پایگاه داده ذخیره می شود، به طور خودکار همه فیلدها را با یک خط زیر پیشوند قرار می دهد (به عنوان مثال footer_text میدان می شود _footer_text).
پیاده سازی
برای این نمایش، ما یک را ایجاد خواهیم کرد صفحه گزینه ها که اطلاعاتی را برای طرح هدر، طرح پاورقی، اطلاعات تماس و کانال های اجتماعی یک سایت نمایشی نگهداری می کند.
لطفاً توجه داشته باشید که تمرکز اصلی بر ایجاد ساختار صفحه در ادمین خواهد بود و فقط فیلدها را در قسمت جلویی بدون افزودن سبک نشان می دهد. تمام فایل های موضوعی در این مورد در دسترس خواهند بود مخزن GitHub.
طبق معمول، من با سفارش خودم کار خواهم کرد زمین بازی موضوع—من آن را تا حد امکان ساده می‌گذارم و فقط قابلیت‌های لازم را برای فیلدهای کربن اضافه می‌کنم.
با در نظر گرفتن آن، پیروی از اسناد، من این کد را در داخل آن اضافه می کنم functions.php:
1 |
use Carbon_Fields\Container; |
2 |
use Carbon_Fields\Field; |
3 |
|
4 |
function crb_attach_theme_options() { |
5 |
Container::make( 'theme_options', __( 'Theme Settings', 'playground' ) ) |
6 |
->set_page_menu_position( 4 ) |
7 |
->set_icon( 'dashicons-admin-settings' ) |
8 |
->add_tab( |
9 |
__( 'Header', 'playground' ), |
10 |
array(...), |
11 |
)
|
12 |
->add_tab( |
13 |
__( 'Contact', 'playground' ), |
14 |
array(...) |
15 |
)
|
16 |
->add_tab( |
17 |
__( 'Socials', 'playground' ), |
18 |
array(...) |
19 |
)
|
20 |
->add_tab( |
21 |
__( 'Footer', 'playground' ), |
22 |
array(...) |
23 |
);
|
24 |
}
|
25 |
add_action( 'carbon_fields_register_fields', 'crb_attach_theme_options' ); |
26 |
|
27 |
function crb_load() { |
28 |
require_once( 'vendor/autoload.php' ); |
29 |
\Carbon_Fields\Carbon_Fields::boot(); |
30 |
}
|
31 |
add_action( 'after_setup_theme', 'crb_load' ); |
این کد تمام فیلدها را در داخل a قرار می دهد ظرف و یک آیتم منو جدید به نام ایجاد کنید تنظیمات پوسته در زیر داشبورد آیتم منو البته، می‌توانید مکان آیتم و رندر شده را سفارشی کنید آیکون.
به علاوه، add_tab روش سازماندهی بهتری را به ارمغان می آورد، زیرا تمام فیلدهای صفحه گزینه های ما را به چهار گروه گروه بندی می کند بخش های زبانه دار.
بیایید اکنون نگاهی دقیق تر به این برگه ها داشته باشیم!
تب سرصفحه
را سرتیتر برگه شامل فیلدهای مربوط به عملکرد هدر خواهد بود. به طور خاص:
- آ چک باکس فیلد مدیریت خواهد کرد که آیا یک روبان در بالای هدر اصلی ظاهر می شود یا خیر.
- سه فیلد (یک متن غنی و دو رنگ فیلدها) ظاهر روبان را تنظیم می کند. با این حال، این موارد تنها در صورتی ظاهر می‌شوند که کادر قبلی انتخاب شده باشد.
- آ اسکریپت های سرصفحه فیلد به ما امکان می دهد کتابخانه نماد Font Awesome 6 را در آن جاسازی کنیم
headبرچسب زدن ما از آن کتابخانه برای چاپ نمادهای اجتماعی استفاده خواهیم کرد–در بخش آینده به آن باز خواهیم گشت.
ما تمام فیلدها را از طریق ایجاد می کنیم make روشی مانند این:
1 |
Field::make( 'header_scripts', 'header_scripts', __( 'Header Scripts', 'playground' ) ), |
2 |
Field::make( 'rich_text', 'header_ribbon', __( 'Ribbon', 'playground' ) ) |
3 |
->set_conditional_logic( |
4 |
array( |
5 |
array( |
6 |
'field' => 'show_header_ribbon', |
7 |
'value' => true, |
8 |
),
|
9 |
)
|
10 |
),
|
11 |
Field::make( 'color', 'header_ribbon_text_color', __( 'Ribbon Text Color', 'playground' ) ) |
12 |
->set_conditional_logic( |
13 |
array( |
14 |
array( |
15 |
'field' => 'show_header_ribbon', |
16 |
'value' => true, |
17 |
),
|
18 |
)
|
19 |
),
|
20 |
Field::make( 'color', 'header_ribbon_bg_color', __( 'Ribbon Background Color', 'playground' ) ) |
21 |
->set_conditional_logic( |
22 |
array( |
23 |
array( |
24 |
'field' => 'show_header_ribbon', |
25 |
'value' => true, |
26 |
),
|
27 |
)
|
28 |
),
|
29 |
Field::make( 'checkbox', 'show_header_ribbon', __( 'Show Ribbon (Top Header)?', 'playground' ) )->set_option_value( 'yes' ), |
سپس، هر جا که بخواهیم آنها را نمایش دهیم، از آن استفاده خواهیم کرد carbon_get_theme_option متد کنید و به عنوان آرگومان نام فیلد را به صورت زیر ارسال کنید:
1 |
<?php
|
2 |
$show_header_ribbon = carbon_get_theme_option( 'show_header_ribbon' ); |
3 |
?>
|
4 |
|
5 |
<header class="site-header"> |
6 |
<nav>
|
7 |
<?php
|
8 |
if ( $show_header_ribbon ) : |
9 |
$header_ribbon = carbon_get_theme_option( 'header_ribbon' ); |
10 |
$header_ribbon_text_color = carbon_get_theme_option( 'header_ribbon_text_color' ) ? carbon_get_theme_option( 'header_ribbon_text_color' ) : '#000'; |
11 |
$header_ribbon_bg_color = carbon_get_theme_option( 'header_ribbon_bg_color' ) ? carbon_get_theme_option( 'header_ribbon_bg_color' ) : 'transparent'; |
12 |
?>
|
13 |
<div class="header-top" style="color: <?php echo esc_attr( $header_ribbon_text_color ); ?>; background: <?php echo esc_attr( $header_ribbon_bg_color ); ?>"> |
14 |
<?php echo wp_kses_post( $header_ribbon ); ?> |
15 |
</div>
|
16 |
<?php endif; ?> |
17 |
<div class="header-bottom">A nice header here</div> |
18 |
</nav>
|
19 |
</header>
|
تماس با برگه
را مخاطب برگه شامل فیلدهای مربوط به تماس است که در بخش‌های مختلف صفحه (به عنوان مثال در سرصفحه، پاورقی، صفحات تماس، نوارهای کناری و غیره) وجود خواهد داشت. به طور دقیق تر، وجود خواهد داشت:
- آ ناحیه متنی فیلد برای افزودن آدرس شرکت
- یک فیلد متنی برای پیوند دادن به مکان Google Maps.
- یک فیلد متنی برای افزودن تلفن شرکت.
- یک فیلد متنی برای افزودن ایمیل شرکت.
- آ انتخاب کنید زمینه ای با گزینه های پویا که به کاربران امکان می دهد گزینه مناسب را انتخاب کنند فرم تماس 7 (CF7) فرم به عنوان فرم خبرنامه
تصور کنید که سایت ما دارای فرم های زیر است:
ما باید همه آنها را در دسترس کاربران ادمین قرار دهیم. اما چالش اینجاست: ما آنها را هاردکد نمی کنیم، بلکه همه گزینه های فیلد انتخابی را پویا می کنیم.
برای انجام این کار، ما سفارشی را تعریف می کنیم get_all_forms تابع و آن را به عنوان پارامتری از add_options روش فیلد انتخابی ما این تابع تمام فرم های سایت را در قالب آرایه برمی گرداند.
در اینجا نحوه ایجاد فیلدهای این برگه آمده است:
1 |
Field::make( 'textarea', 'address', __( 'Address', 'playground' ) ), |
2 |
Field::make( 'text', 'address_directions', __( 'Address Directions', 'playground' ) )->set_attribute( 'type', 'url' ), |
3 |
Field::make( 'text', 'phone', __( 'Phone', 'playground' ) )->set_attribute( 'type', 'tel' ), |
4 |
Field::make( 'text', 'email', __( 'Email', 'playground' ) )->set_attribute( 'type', 'email' ), |
5 |
Field::make( 'select', 'newsletter_form', __( 'Select Newsletter Form', 'playground' ) ) |
6 |
->add_options( 'get_all_forms' ), // or set |
و اینجاست get_all_forms() اعلام:
1 |
function get_all_forms() { |
2 |
$all_forms_array = array(); |
3 |
$all_forms = get_posts( |
4 |
array( |
5 |
'post_type' => 'wpcf7_contact_form', |
6 |
'posts_per_page' => -1, |
7 |
)
|
8 |
);
|
9 |
|
10 |
foreach ( $all_forms as $form ) : |
11 |
$all_forms_array[ $form->ID ] = esc_html( $form->post_title ); |
12 |
endforeach; |
13 |
return $all_forms_array; |
14 |
}
|
در مرحله بعد، فیلدها را در مکانی که می خواهیم به صورت زیر خروجی می دهیم:
1 |
<?php
|
2 |
$address = carbon_get_theme_option( 'address' ); |
3 |
$directions = carbon_get_theme_option( 'address_directions' ); |
4 |
$phone = carbon_get_theme_option( 'phone' ); |
5 |
$email = carbon_get_theme_option( 'email' ); |
6 |
$newsletter_form = carbon_get_theme_option( 'newsletter_form' ); |
7 |
?>
|
8 |
|
9 |
<address>
|
10 |
<?php echo wp_kses_post( $address ); ?> |
11 |
<a href="<?php echo esc_url( $directions ); ?>" target="_blank"> |
12 |
<?php esc_html_e( 'See Map', 'playground' ); ?> |
13 |
</a>
|
14 |
<a href="<?php echo esc_url( 'tel:' . $phone ); ?>"> |
15 |
<?php echo esc_html( $phone ); ?> |
16 |
</a>
|
17 |
<a href="<?php echo esc_url( 'mailto:' . $email ); ?>"> |
18 |
<?php echo esc_html( $email ); ?> |
19 |
</a>
|
20 |
</address>
|
21 |
|
22 |
<div>
|
23 |
<?php echo do_shortcode( '[contact-form-7 id="' . esc_attr( $newsletter_form ) . '"]' ); ?> |
24 |
</div>
|
برگه اجتماعی
را اجتماعی برگه شامل الف خواهد بود مجتمع زمینه برای اضافه کردن تعداد نامتناهی اجتماعی. هر شبکه اجتماعی دارای سه فیلد متنی خواهد بود:
- یک فیلد متنی برای عنوان اجتماعی (مانند فیس بوک).
- یک فیلد متنی برای URL اجتماعی.
- یک فیلد متنی برای قرار دادن کلاس‌های Font Awesome (مثلاً کلاس های فیس بوک).
برای کسانی که از دنیای ACF می آیند، میدان پیچیده معادل میدان تکرارکننده ACF است.
در اینجا نحوه ایجاد فیلد پیچیده از نظر کد آمده است:
1 |
<?php
|
2 |
Field::make( 'complex', 'socials' ) |
3 |
->set_layout( 'tabbed-horizontal' ) |
4 |
->add_fields( |
5 |
array( |
6 |
Field::make( 'text', 'social_title', __( 'Social Title', 'playground' ) ), |
7 |
Field::make( 'text', 'social_url', __( 'Social URL', 'playground' ) )->set_attribute( 'type', 'url' ), |
8 |
Field::make( 'text', 'social_icon', __( 'Social Icon', 'playground' ) ) |
9 |
->set_attribute( 'placeholder', 'Add a class from the Font Awesome library' ), |
10 |
)
|
11 |
),
|
و در اینجا نحوه چاپ داده های آنها در هر کجا که بخواهیم آمده است:
1 |
<?php
|
2 |
$socials = carbon_get_theme_option( 'socials' ); |
3 |
?>
|
4 |
|
5 |
<ul>
|
6 |
<?php
|
7 |
foreach ( $socials as $social ) : |
8 |
//
|
9 |
/* translators: %s: social channel */
|
10 |
$title = sprintf( __( 'Find us on %s', 'playground' ), $social['social_title'] ); |
11 |
?>
|
12 |
<li>
|
13 |
<a href="<?php echo esc_url( $social['social_url'] ); ?>" aria-label="<?php echo esc_attr( $title ); ?>" title="<?php echo esc_attr( $title ); ?>" target="_blank"> |
14 |
<i class="<?php echo esc_attr( $social['social_icon'] ); ?>" aria-hidden="true"></i> |
15 |
</a>
|
16 |
</li>
|
17 |
<?php endforeach; ?> |
18 |
</ul>
|
برگه پاورقی
مشابه تب هدر، the پاورقی برگه شامل فیلدهای مربوط به عملکرد فوتر خواهد بود. به طور خاص:
- یک فیلد متنی متن پاورقی را خروجی می دهد.
- دو فیلد رنگی رنگ های پیش زمینه و پس زمینه پاورقی را تنظیم می کند.
طبق معمول، ما آنها را با استفاده از make روش:
1 |
Field::make( 'rich_text', 'footer_text', __( 'Footer Text', 'playground' ) ), |
2 |
Field::make( 'color', 'footer_text_color', __( 'Footer Text Color', 'playground' ) ), |
3 |
Field::make( 'color', 'footer_bg_color', __( 'Footer Background Color', 'playground' ) ), |
و آنها را در فایل هدف نمایش می دهیم:
1 |
<?php
|
2 |
$footer_text = carbon_get_theme_option( 'footer_text' ); |
3 |
$footer_text_color = carbon_get_theme_option( 'footer_text_color' ) ? carbon_get_theme_option( 'footer_text_color' ) : '#000'; |
4 |
$footer_bg_color = carbon_get_theme_option( 'footer_bg_color' ) ? carbon_get_theme_option( 'footer_bg_color' ) : 'transparent'; |
5 |
?>
|
6 |
|
7 |
<footer class="site-footer" style="color: <?php echo esc_attr( $footer_text_color ); ?>; background: <?php echo esc_attr( $footer_bg_color ); ?>"> |
8 |
<div class="container"> |
9 |
<?php echo wp_kses_post( $footer_text ); ?> |
10 |
</div>
|
11 |
</footer>
|
نتیجه
در این آموزش، جعبه ابزار فیلدهای سفارشی وردپرس Carbon Fields را مرور کردیم و بسیاری از انواع فیلدهای آن را با ساخت یک صفحه گزینه های تم بررسی کردیم. امیدوارم اکنون مطالب کافی برای تصمیم گیری در مورد اینکه آیا این کتابخانه می تواند نیازهای شما را برای پروژه بعدی وردپرس شما برآورده کند، داشته باشید.
به طور خلاصه، اگر:
- شما چیزی رایگان می خواهید و از طرفداران بزرگ گسترش سفارشی ساز وردپرس نیستید.
- شما می توانید بدون رابط مدیریت کار کنید.
- شما یک پلاگین/موضوع می سازید که به تعداد کمی فیلد نیاز دارد.
از سوی دیگر، ممکن است در مورد استفاده از آن فکر دیگری داشته باشید اگر:
- شما مشکلی در پرداخت هزینه برای افزونه وردپرس ندارید که گزینه‌های تایپ و طرح‌بندی بیشتری را ارائه می‌دهد ACF PRO.
- شما ترجیح می دهید فیلدهای خود را از طریق یک رابط کاربری مدیریت کنید و از مدیریت آنها از طریق کد خسته شوید.
- علاوه بر اینکه اجباری نیست، اگر در حال ساخت یک سایت/افزونه چند زبانه هستید، ممکن است بخواهید راه حل هایی را انتخاب کنید که رسماً توسط ابزار ترجمه ای که انتخاب می کنید پشتیبانی می شوند. برای مثال، اگرچه به نظر می رسد کربن فیلدز به خوبی با آن کار می کند WPML با توجه به آنها اسناد و تست های محلی من، این ابزار نیست به طور رسمی سازگار است با WPML
اما بدون شک، این ابزار مفیدی است که هر توسعه دهنده وردپرس باید حداقل یک بار آن را امتحان کند. تو چطور؟ آیا تا به حال از آن استفاده کرده اید؟ به ما اطلاع دهید ایکس!
مثل همیشه، خیلی ممنون که خواندید!
