كيفية التمديد المرئي مع عناصر المحتوى المخصص 

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

وظيفة المؤلف المرئيه الافتراضيه 

قبل أن ننظر إلى بناء صفحة ، دعنا نعرض بعض الميزات الافتراضية. 

عناصر المحتوى 

يأتي Visual Composer مع مجموعة واسعة من عناصر المحتوى المضمنة.   بالإضافة إلى ذلك ، يوفر Visual Composer أكثر من 200 وظيفة إضافية ،  مجانية ومدفوعة.

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

يسمح لك مدير Shortcode بإضافة عناصر مخصصة ذات معلمات.  في بعض الطرق المعادل المرتكز على المستخدم لطريقة المطور لرسم معالم عناصر جديدة. 

منشئ الشبكة المتقدمة 

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

مكتبة القوالب 

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

طبل افتتاحي من فضلك .. 

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

باستخدام محرر الواجهة الأمامية ، يمكنك تعديل ما تراه بالضبط.  انها بالتأكيد أكثر ما تراه هو ما تحصل عليه من محرر WordPress WYSIWYG الافتراضي! 

منشئ الصفحة يعمل مع نظام الصف والأعمدة.  يتم تغليف كل عنصر مضاف إلى الصفحة داخل حاوية الصف.  يمكن إضافة عناصر متعددة إلى نفس الصف ، في الأعمدة ، أو مزيد من الصفوف المتداخلة.   توضح لقطة الشاشة أدناه كيف يمكن إضافة العناصر والصفوف والأعمدة وإزالتها وتعديلها. 

بعد تغطية الميزات الأساسية المتاحة ، دعونا لا نحول انتباهنا إلى بعض التطور.   سنقوم بتمديد الوظائف الافتراضية لـ Composer وإضافة عناصر مخصصة جديدة. 

التمديد المرئي البصري 

لتجاوز أي عنصر في Visual Composer ، تحتاج أولاً إلى نسخ ملف القالب من مجلد البرنامج المساعد للمؤلف المرئي (js_composer)> include> templates إلى المجلد yourtheme> vc_templates .  من البرنامج التعليمي السابق ، قد تتذكر أنه في موضوع Focuson لدينا أربعة ملفات: 

1. vc_column.php 
2. vc_column_text.php 
3. vc_row.php 
4. vc_video.php 

وكما ناقشنا ، فإن التسمية مهمة جدًا هنا.  يجب تسمية هذه القوالب تمامًا كما هي في مجلد المكونات الإضافية الافتراضية VC. 

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

يمكن تقسيم بنية الملف إلى ثلاثة أجزاء: 

1. استخراج سمات الرمز القصير 
2. قم بتحضير الإعدادات للإخراج 
3. إخراج بنية الرمز القصير 

ولكن ماذا لو كنت ترغب في إضافة أو إزالة سمات الرمز القصير الموجودة ، كيف ستتعامل مع ذلك؟  تلبية ثلاث وظائف جديدة: 

vc_remove_param ()؛ 

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

1

vc_remove_param( "vc_column", "el_class" );

vc_add_param ()؛ 

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

1

vc_add_param('vc_column', array(

2

    "type"       => "dropdown",

3

    "class"      => "",

4

    "heading"    => "Animate",

5

    "param_name" => "animate",

6

    "value"      => array(

7

    "False"  => 'false',

8

    "True"   => 'true'

9

    )

10

));

vc_add_params ()؛ 

تشبه هذه الوظيفة vc_add_param () ، ولكنها تسمح لك بإضافة معلمات متعددة لعنصر واحد.  يمكنك العثور على قائمة بجميع أنواع المعلمات هنا . 

لإضافة أو إزالة params جديدة ، بالإضافة إلى إضافة عناصر جديدة ، تحتاج إلى تحرير ملف التكامل ، وهو في حالتنا ninzio_vc.php. 

1. نبدأ بتعطيل محرر الواجهة الأمامية.   يعد محرر الواجهة الأمامية ميزة رائعة حقًا ، ولكن عناصرنا المخصصة لا تدعمها.   الأمر متروك لك ، كمطور للموضوعات ، سواء كنت تريد دعم المحررين الأمامية و / أو الخلفية. 
2. قم بإزالة كافة المعلمات غير الضرورية أو غير المدعمة من العناصر المستهدفة باستخدام vc_remove_param ()؛ 
3. إضافة معلمات جديدة إلى العناصر الموجودة مع vc_add_param ()؛ أوvc_add_params ()؛ المهام. 
4. ثم أضف عناصر جديدة .. 

كيفية إضافة عناصر مخصصة 

تأتي إضافة عناصر محتوى جديدة إلى Visual Composer عندما يكون ملف الرموز القصيرة موجودًا في الموضوع أو الوظيفة الإضافية للموضوع ، كما هو الحال في حالتنا ، لذلك نحتاج أولاً إلى التحقق من الوظيفة ما إذا كان المكون الإضافي ninzio-addons مثبتًا ونشطًا: 

1

if (defined( 'NINZIO_ADDONS' ) && file_exists( get_template_directory() . '/plugins/ninzio-addons.zip' ) ) {

2

    … new elements code goes here...

3

}

كيف يفهم Visual Composer أنه تمت إضافة عناصر جديدة؟  مع add_action ()؛ . 

1

add_action( 'init', 'focuson_ninzio_integrateVC');

2

3

function focuson_ninzio_integrateVC() {... new elements}

سنستخدم الخطوة الأولى ، مما يمنحنا ذلك: 

1

if (defined( 'NINZIO_ADDONS' ) && file_exists( get_template_directory() . '/plugins/ninzio-addons.zip' ) ) {

2

3

    add_action( 'init', 'focuson_ninzio_integrateVC');

4

5

    function focuson_ninzio_integrateVC() {... new elements}

6

7

}

الآن نحن على استعداد لإضافة عناصر جديدة لدينا ، والتي نحتاج إلى وظيفة جديدة أخرى: 

vc_map ()؛ 

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

1

<?php 

2

3

/*  SEPARATOR            (CONTENT)

4

/*-------------------------------*/

5

6

    vc_map(array(

7

  	'name'                    => "Separator",

8

		'base'                    => "nz_sep",

9

		'class'                   => 'nz-sep',

10

		'show_settings_on_create' => false,

11

		'category'                => esc_html__("Ninzio",'focuson'),

12

		'icon'                    => 'icon-separator',

13

		'description'             => 'Use this element to separate content',

14

		'js_view'                 => '',

15

		'params'                  => array(

16

17

            ...

هذه كثير من الصفات!   دعونا نلقي الضوء على أهمها: 

• الاسم اسمًا وصفيًا فريدًا لعنصرك المخصص.   سيرى المستخدمون ذلك في علامة التبويب المرئيات المرئية. 
• القاعدة ، التي لا تقل أهمية عن الاسم ، هي اسم العلامة القصيرة.   إذا كنت معتادًا على إنشاء رمز قصير مخصص ، فستعرف أن جميع الرموز القصيرة المخصصة لها علامات.  على سبيل المثال ، يحتوي فاصلنا المخصص على علامة nz_sep .   يجب أن تكون قاعدة العنصر فريدة ويجب أن يتم تسميتها تمامًا مثل اسم الرمز القصير في ملف shortcodes.php (كما هو الحال في مظهر Focuson الخاص بنا): 

1

<?php 

2

3

/*  SEPARATOR SHORTCODE

4

/*===================*/

5

6

	function nz_sep($atts, $content = null) {

7

8

		extract(shortcode_atts(

9

			array(

10

				'top'    => '20',

11

				'bottom' => '20',

12

				'type'   => 'solid',

13

				'color'  => '#eeeeee',

14

				'align'  => 'left',

15

				'width'  => '',

16

				'height' => ''

17

			), $atts)

18

		);

19

20

		$styles = "";

21

22

		if (isset($color) && !empty($color)) {

23

			$styles .= 'border-bottom-color:'.$color.';';

24

		}

25

26

		if (isset($width) && !empty($width)) {

27

			$styles .= 'width:'.absint($width).'px;';

28

		} else {

29

			$styles .= 'width:100%;';

30

		}

31

32

		if (isset($height) && !empty($height)) {

33

			$styles .= 'border-bottom-width:'.absint($height).'px;';

34

		}

35

36

		if (isset($type) && !empty($type)) {

37

			$styles .= 'border-bottom-style:'.$type.';';

38

		}

39

40

		if (isset($top) && !empty($top)) {

41

			$styles .= 'margin-top:'.absint($top).'px;';

42

		}

43

44

		if (isset($bottom) && !empty($bottom)) {

45

			$styles .= 'margin-bottom:'.absint($bottom).'px;';

46

		}

47

48

		$output = '<div class="sep-wrap '.sanitize_html_class($align).' nz-clearfix"><div class="nz-separator '.sanitize_html_class($type).'" style="'.esc_attr($styles).'">&nbsp;</div></div>';

49

		return $output;

50

	}

51

	add_shortcode('nz_sep', 'nz_sep');

52

53

?>

• الطبقة ليست حرجة ، ولكن خيارا هاما ، بمثابة معرف غير فريد.   يجب أن تكون التسمية وصفية وبدون مسافات ، استخدم شرطات أو شرطات سفلية. 
• show_settings_on_create عبارة عن معلمة منطقية وصفية ذاتية. 
• الفئة مهمة جدا.   إذا كنت ترغب في تجميع عناصرك المخصصة ضمن علامة تبويب قائمة مخصصة واحدة في قائمة عناصر Composer Visual ، يجب إضافة فئة مخصصة.  إذا كنت ترغب في تضمين عناصر في فئة موجودة ، فاستخدم اسم علامة التبويب القائمة الموجودة: 

• رمز مشابه للفئة .   نقوم بإضافة اسم رمز حتى نتمكن من تصميم الرمز القصير في قائمة المؤلف المرئي.   فمثلا: 

1

i.icon-separator,.nz-sep .vc_element-icon {background-image:url(../images/shortcodes/sep.png)!important;}

• يضيف وصفًا صغيرًا لعنصر مخصص.   سوف يرى المستخدمون هذا. 
• js_view هو معلمة مهمة جدا.  عندما يكون لديك عناصر تشتمل على مكونات الأصل والطفل (على سبيل المثال ، مربعات المحتوى ، التي تحتوي على عناصر رئيسية في حاوية الأصل والتابعة ، حيث تحتوي العناصر الأصلوالتابعة على سمات منفصلة) يجب أن تحتوي هذه السمة على القيمةVcColumnView .   سنفحص التفاصيل الأكثر تعقيدًا في هذه اللحظة. 
• params هي مجموعة من المعلمات المراد إضافتها إلى عنصرك المخصص.  يتصرف بشكل مشابه إلى الدالة vc_add_params ()، ولكن متداخلة في الدالة vc_map () . 

عناصر الوالدين والطفل 

تتطلب عناصر الحاوية ذات العناصر الفرعية بعض التكوين المحدد قبل الإضافة.  في الدالة vc_map () نحتاج إلى إضافةمعلمتين إضافيتين لجعل عناصرنا إما حاوية ، أو طفل عنصر آخر. 

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

1. العنصر الأصل مع سماته 
2. وعناصر صندوق الطفل ، مع كل سماتها. 

يمكن أن يحتوي مربع محتوى واحد على عناصر صندوق أطفال غير محدودة.   لذلك لدينا قضيتين للحل: 

1. بطريقة ما ، نحتاج إلى إخبار Visual Composer أن مربع المحتوى هو عنصر تابع للطفل / الأصل ، 
2. إذا كان المربع هو الطفل الوحيد الممكن لعنصر مربع المحتوى الرئيسي ، وأن عنصر مربع المحتوى هو الوالد الوحيد الممكن للعناصر الفرعية للمربع. 

قانون العنصر الرئيسي 

لتجنب الارتباك قدر الإمكان ، دعنا نلقي نظرة على عنصر موجود.   في موضوع Focuson لدينا عنصر "مربعات المحتوى" ، مع معلمتين إضافيتين ذات أهمية خاصة: 

1

"as_parent" => array('only' => 'nz_box')

تذكر المعلمة الأساسية لوظيفة vc_map () الخاصة بنا ؟  هنا ، مع as_parent ، نقوم بتسجيل عنصر nz_content_box كأحد الوالدين فقط لعنصر تابع nz_box . 

1

"js_view" => 'VcColumnView'

عندما js_view ومن المقرر أن VcColumnView الملحن البصرية يضيف وظائف UI إضافية إلى العنصر في محرر، حتى نتمكن من إضافة عنصر تابع جديد. 

رمز عنصر الطفل 

في نفس السياق ، يحتوي رمز عنصر nz_box على معلمة إضافية: 

1

"as_child" => array('only' => 'nz_content_box'),

مع as_child نقوم بتسجيل عنصر nz_box كطفل ، ولكن فقط لعنصر أصل nz_content_box . 

توسيع الفصول 

إذا قمت الآن بزيارة قائمة Visual Composer ثم انقر فوق عنصر مربع المحتوىالمضافة حديثًا ، سترى ... لا يعمل.   لم تتم إضافة وظيفة ولي الأمر / الطفل ، نظرًا لأنه لا يزال هناك أمر واحد يتعين علينا فعله - نحن بحاجة إلى توسيع نطاق الدروس: 

• WPBakeryShortCodesContainer 
• WPBakeryShortCode 

الفئة الأولى مسؤولة عن العناصر الأم ، والثانية مسؤولة عن العناصر الفرعية.   لذا ، مباشرة بعد إضافة وظيفة الفعل: 

1

if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {

2

    class WPBakeryShortCode_nz_Content_Box extends WPBakeryShortCodesContainer {}

3

}

كما تتذكر ، كان العنصر الأساسي لمربع المحتوى هو nz_content_box ، كما يجب أن يكون هذا الاسم موجودًا في اسم الفئة الذي يمتد إلى فئةWPBakeryShortCodesContainer .  في حالتنا ، اسم الفئة الجديد هو WPBakeryShortCode_nz_Content_Box . 

1

if ( class_exists( 'WPBakeryShortCode' ) ) {

2

3

    class WPBakeryShortCode_nz_Box extends WPBakeryShortCode {}

4

5

}

وينطبق الشيء نفسه على عنصر الطفل.  الاسم الأساسي كان nz_boxوسيكون اسم الفئة الجديدة WPBakeryShortCode_nz_Box . 

مهما كان اسم قاعدة العنصر ، يجب أن يكون موجودًا في اسم الفئة الجديده. 

الآن ، إذا ألقيت نظرة على محرر الصفحات مرة أخرى ، سترى أن عنصر مربع المحتوى الجديد يحتوي على وظيفة تابعة للطفل / الأصل. 

بناء صفحات مع المؤلف المرئي

بعد العمل الشاق ، يمكننا جني ثمار عملنا.  ألقِ نظرة على الصفحة الرئيسية الرئيسية لـ Focuson Theme .   دعونا نبني هذه الصفحة الرئيسية باستخدام Visual Composer. 

يمكن تقسيم الهيكل إلى عدة أقسام: 

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

إعادة إنشاء هذا هو عمل لحظة مع Visual Composer. 

 سنقوم بلف كل كتلة داخل عنصر "الصف" المنفصل مع عنصر "عمود" واحد على الأقل.   كما ناقشنا ، هذا هو الهيكل المطلوب والحد الأدنى من صفحات المؤلف المرئي. 

عرض شريط التمرير 

تم دمج موضوع Focuson في شريط التمرير الثوري .   لا يتم إضافة شريط التمرير مع Visual Composer ، ومع ذلك ، بمجرد تثبيت Revolution Slider و Visual Composer ، ستلاحظ عنصرًا جديدًا "منزلق الثورة".   هذه أداة إضافية مجانية من شريط التمرير الثوري ، ومع هذا العنصر يمكنك وضع شريط التمرير في الصفحة ، حتى إذا لم يكن موضوعك مدمجًا مع المؤلف المرئي. 

صناديق المحتوى 

تذكر عنصر مثال "مربعات المحتوى" ؟   يمكننا إنشاء مربعات محتوى مذهلة باستخدام عنصرنا المخصص: 

مشاريع مميزة 

في هذا القسم نستخدم 

1.  text_column
2.  عنصر الفجوة ، لإضافة مساحة
3. صورة مفردة مركزية (تعمل كمقسم خط لطيف) 
4. فجوة أخرى 
5. وعناصر "المشاريع الحديثة" 

تقريبا جميع العناصر هنا هي العرف المضافة. 

العدادات 

للعدادات استخدمنا خيارات خلفية الصف (صورة ولون) لعلم الجمال.   كل هذه الخيارات هي مخصصة مضافة من Ninzio.   نضع عنصر العداد المخصص داخل هذا الصف المصمم. 

"لماذا تختار لنا" معلومات block

باستخدام أعمدة Visual Composer ، يمكننا إضافة محتوى ثنائي العمود: 

يتم إضافة جميع هذه العناصر تقريبًا إلى العادة ، ولا يأتي سوى عنصر "العنوان المخصص" افتراضيًا مع المؤلف المرئي.   في محرر الخلفية يبدو غير متماثل ، ولكن في الواجهة الأمامية سترى بنية لطيفة المظهر.   لا تتعلق إدارة المحتوى ببساطة بتعبئة الصفحات ، بل هي أيضًا عملية منطقية وإبداعية. يجب أن تأخذ في الاعتبار أبعاد الصور والنصوص ، وأن تنظر في كيفية ظهورها على أجهزة مختلفة.   في بعض الأحيان ، هناك حاجة إلى تصحيحات سريعة الاستجابة.   لحسن الحظ ، يحتوي Visual Composer على الأدوات المطلوبة.  يمكنك في خيارات تحرير الأعمدة العثور علىعلامة التبويب الخيارات المستجيبة حيث يمكنك ضبط حجم العمود بناءً على مجموعات الأجهزة. 

 الراية

هذا ليس أكثر من صف مع صورة الخلفية وتأثير المنظر ، وكمية صغيرة من المحتوى بها مع تلميح الأدوات ، العنوان والأزرار. 

أعضاء الفريق 

هذا عنصر إضافي من Ninzio ؛ دائري لأعضاء الفريق. 

"معلومات إبداعية" معلومات Block 

مرة أخرى لا يوجد شيء غير عادي هنا ؛ عنصر صف عادي مع عمودين ، يحتوي كل منهما على محتوى. 

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

شهادات العميل 

لقد أنشأنا أيضًا عنصرًا مخصصًا لإضافة شهادات.   مرة أخرى ، لا شيء غير عادي في اللعب هنا. 

شعار الراعي 

والقسم الأخير هو شعارات الراعي.   إنها مكتبة من الشعارات داخل صف بلون رمادي.   هذا العنصر هو أيضا مخصص ل الاضافة. 

الاستنتاج 

هذا هو!   الآن أنت تعرف كل ما هو مطلوب لدمج Visual Composer مع السمة الخاصة بك وإنشاء الصفحات بسرعة وسهولة.  كمورد لمزيد من الدراسة ، أقترح عليك إلقاء نظرة على صفحة wiki الرسمية لـ Visual Composer .   إذا كان لديك أي أسئلة ، فلا تتردد في ترك تعليق أدناه!