اضافة الحقول المخصصة ACF ووردبريس البرنامج التعليمي الكامل

في هذا البرنامج التعليمي الكامل الحقول المخصصة المتقدمة ، سأعلمك أنه ليس صعبًا للغاية ، لأن الأشخاص الذين خلف الكواليس الذين أنشأوا هذا البرنامج المساعد قد قاموا بعمل رائع لتسهيل استخدام الوظيفة الديناميكية لـ ووردبريس

لنبدأ بإنشاء قائمة ، ستوضح لك هذه القائمة الميزات الرئيسية التي يمكنك استخدامها عبر البرنامج المساعد المتقدم للحقول المخصصة.

أنواع الحقول المخصصة المتقدمة في اضافة ACF :

نوع الحقل	نوع الحقل
Date Picker Date Time Picker Google Map Time Picker Accordion Flexible Content Repeater Tab Layout Clone Layout Select True / False Choice File	Range Text Text Area Button Group Choice Checkbox Radio Button Gallery Image oEmbed Wysiwyg Editor Color Picker

كيفية استخدام الحقول المخصصة المتقدمة في قالب ووردبريس ؟

أولاً ، تحتاج إلى معرفة مكان وزمان استخدام أنواع الحقول المخصصة المتقدمة ، ولهذا ، سأقدم لك بعض الأمثلة لفهم كيفية عملها.

لنفترض أنك تريد إنشاء موقع ويب عقارات ، ولتمكينك من إرسال معلومات الملكية ، ستحتاج إلى استخدام الحقول المخصصة في نوع المنشور الخاص بك والذي يمكنك تسميته مواقع … تعرف على المزيد هنا حول نوع المنشور المخصص وكيف لصنعه..

بناء موقع عقاري باستخدام اضافة ACF

ستحتاج إلى تسجيل خمسة حقول مخصصة الآن باستخدام المكون الإضافي ACF المسمى على النحو التالي:

نوع الحقل	نوع الحقل
Address City Name Price Rooms Number Living Space	Text Select Number Number Number

انتقل الآن إلى اضافة ACF في ووردبريس ، وانقر فوق اضافة جديد ، ثم أعطه اسم Location …. ثم قم بعمل الحقول المخصصة كما هو موضح أعلاه … عند الانتهاء ، قم بتعيين الموقع ليتم عرضه في المواقع نوع آخر.

اذهب الآن إلى المواقع ، اكتب المنشور واضغط إضافة جديد ، املأ الحقول واحفظها …

اعرض الحقول المخصصة في موقع الويب الخاص بك باستخدام البرنامج المساعد

الآن لعرض الحقول المخصصة لديك خياران ، استخدام اما الاضافة أو مع بعض التعليمات البرمجية في ملف القالب الخاص بك …

لعرض حقول الحقول المخصصة المتقدمة باستخدام مكون إضافي ، فإن أفضل مكون إضافي للقيام بذلك هو Elementor Pro …

انتقل إلى قوالب Elementor Pro ، واصنع قالبًا جديدًا أطلق عليه اسم المواقع وقم بتعيينه إلى مواقع نوع وعاء واضغط على إنشاء قالب ..

الآن اسحب أداة النص من الجانب الأيسر أو الأيمن بناءً على لغة موقع الويب الخاص بك وانقر فوق الرمز الديناميكي كما ترى في الصورة أدناه

الآن تحتاج فقط إلى تحديد حقل ACF الأول الذي يسمى العنوان ، هذا هو ….. ولكن ماذا لو كنت تريد استخدام هذا الحقل لعرض Adres في خرائط Gooele؟

لا توجد مشكلة ، اسحب أداة خرائط Google وكما ترى ، انقر فوق الرمز الديناميكي وكرر العملية كما أوضحنا أعلاه …

الآن لعرض حقل اسم المدينة ، لديك في Elementor أيضًا خيارات لاستخدامها ، TEXT WIDGET أو Post info ، والقيام بنفس الشيء .. انقر فوق الرمز الديناميكي واختر الحقل ….

كرر ذلك لعرض جميع الحقول المخصصة أعلاه باستخدام Elementor.

اعرض الحقول المخصصة في موقع الويب الخاص بك بدون مكون إضافي

أولًا للقيام بذلك ، ستحتاج إلى معرفة القليل من PHP – HTML – CSS

الكود الذي سيتم استخدامه هو لكل حقل كما هو مكتوب أدناه:

حقل Address

<p><?php the_field('address'); ?></p>

ولعرض حقل العنوان باستخدام خرائط Google ، ستحتاج إلى تغيير نوع الحقل ، بدلاً من حقل النص إلى خرائط Google وتحتاج إلى القيام ببعض الأشياء الأخرى.

تحتاج أولاً إلى اتباع تعليمات Google an API Key. يتطلب حقل خرائط Google واجهات برمجة التطبيقات التالية ؛ API للخرائط JavaScript وواجهة برمجة تطبيقات التكويد الجغرافي وواجهة برمجة تطبيقات الأماكن.

بمجرد تسجيل Google an API Key ، عد إلى مجلد الثيم الخاص بك وقم بلصق الرمز في Functions.php

لتسجيل مفتاح Google API الخاص بك ، يرجى استخدام إحدى الطرق التالية.
// Method 1: Filter.
function my_acf_google_map_api( $api ){
    $api['key'] = 'xxx';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

لعرض الموقع المحفوظ في خريطة Google ، يرجى استخدام الرمز API

قم بلصقه الآن

<style type="text/css">
.acf-map {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
}

// Fixes potential theme css conflict.
.acf-map img {
   max-width: inherit !important;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script type="text/javascript">
(function( $ ) {

/**
 * initMap
 *
 * Renders a Google Map onto the selected jQuery element
 *
 * @date    22/10/19
 * @since   5.8.6
 *
 * @param   jQuery $el The jQuery element.
 * @return  object The map instance.
 */
function initMap( $el ) {

    // Find marker elements within map.
    var $markers = $el.find('.marker');

    // Create gerenic map.
    var mapArgs = {
        zoom        : $el.data('zoom') || 16,
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map( $el[0], mapArgs );

    // Add markers.
    map.markers = [];
    $markers.each(function(){
        initMarker( $(this), map );
    });

    // Center map based on markers.
    centerMap( map );

    // Return map instance.
    return map;
}

/**
 * initMarker
 *
 * Creates a marker for the given jQuery element and map.
 *
 * @date    22/10/19
 * @since   5.8.6
 *
 * @param   jQuery $el The jQuery element.
 * @param   object The map instance.
 * @return  object The marker instance.
 */
function initMarker( $marker, map ) {

    // Get position from marker.
    var lat = $marker.data('lat');
    var lng = $marker.data('lng');
    var latLng = {
        lat: parseFloat( lat ),
        lng: parseFloat( lng )
    };

    // Create marker instance.
    var marker = new google.maps.Marker({
        position : latLng,
        map: map
    });

    // Append to reference for later use.
    map.markers.push( marker );

    // If marker contains HTML, add it to an infoWindow.
    if( $marker.html() ){

        // Create info window.
        var infowindow = new google.maps.InfoWindow({
            content: $marker.html()
        });

        // Show info window when marker is clicked.
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open( map, marker );
        });
    }
}

/**
 * centerMap
 *
 * Centers the map showing all markers in view.
 *
 * @date    22/10/19
 * @since   5.8.6
 *
 * @param   object The map instance.
 * @return  void
 */
function centerMap( map ) {

    // Create map boundaries from all map markers.
    var bounds = new google.maps.LatLngBounds();
    map.markers.forEach(function( marker ){
        bounds.extend({
            lat: marker.position.lat(),
            lng: marker.position.lng()
        });
    });

    // Case: Single marker.
    if( map.markers.length == 1 ){
        map.setCenter( bounds.getCenter() );

    // Case: Multiple markers.
    } else{
        map.fitBounds( bounds );
    }
}

// Render maps on page load.
$(document).ready(function(){
    $('.acf-map').each(function(){
        var map = initMap( $(this) );
    });
});

})(jQuery);
</script>

بعد ذلك ، تحتاج إلى عرض حقل Adreess أسفل الرمز الأخير مباشرةً ، والصق التالي

<?php 
$address = get_field('address ');
if( $address ): ?>
    <div class="acf-map" data-zoom="16">
        <div class="marker" data-lat="<?php echo esc_attr($address ['lat']); ?>" data-lng="<?php echo esc_attr($address ['lng']); ?>"></div>
    </div>
<?php endif; ?>

حقل CITY

في هذه الحالة ، لدينا خياران ، إذا أعطيت قيمة واحدة فقط استخدم هذا الرمز

<?php
$name= get_field( 'city_name' );
// Create a comma-separated list from selected values.
if( $name): ?>
<p>City : <?php echo implode( ', ', $name); ?></p>
<?php endif; ?>

ولكن في حالة تقديم أكثر من قيمة ​​، فأنت بحاجة إلى استخدام هذا الرمز

<?php
$name= get_field( 'city_name' );
?>
<p>City : <span class="city-<?php echo esc_attr($name['value']); ?>"><?php echo esc_html($name['label']); ?></span></p>

الحقل Price

<p>Price : <?php the_field('price'); ?></p>

الحقل Rooms Number

<p>Rooms Number: <?php the_field('rooms_number'); ?></p>

الحقل Living Space

<p>Living Space: <?php the_field('living_space'); ?></p>

هذا كل شيء ، هل من الصعب استخدام ACF (الحقول المخصصة المتقدمة)

يمكنك تحقيق المزيد والمزيد باستخدام هذا المكون الإضافي الرائع ، فقط قابلني في دروس أخرى لتعليمك كيفية إنشاء أكثر من هذا