كيفية إنشاء أنماط بلوك WordPress لتسريع بناء موقع الويب

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

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

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

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

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

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

حسنًا ، هذا ما سنحتاجه. هذه ميزة جديدة لـ Gutenberg وستحتاج إلى تثبيت مكون Gutenberg الإضافي مُفعَّلاً ، لذلك ستحتاج إلى إصدار 7.8 كحد أدنى وهذا ما تم إصداره مؤخرًا. الآن ، ما سيحدث في النهاية هو ربما في غضون أربعة إلى ستة أشهر ، ربما بحلول نهاية صيف 2020 ، سيتم تضمين هذا في WordPress افتراضيًا ، ولكن في الوقت الحالي ، ستحتاج إلى ، إذا كنت تريد تجربة ذلك ، ستحتاج إلى تثبيت مكون Gutenberg الإضافي.

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

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

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

قم بتنزيل ، أو أنا آسف ، قمت بالنقر فوق التثبيت الآن ثم قمت بتنشيطه. إنها عملية بسيطة للغاية. لذلك سأقوم بالنقر فوق المكونات الإضافية المثبتة ، ويمكنك أن ترى أنني قمت بتثبيت Gutenberg وكانت هذه كتل إيقاع اختيارية ، وهنا مقتطفات التعليمات البرمجية. لذلك سأقوم بتنشيط مقتطفات الشفرة ويمكنك أن ترى أنها مفعلة الآن هنا.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الآن ، هذا ليس للصفحات فقط ، هذا للمنشورات ، ولا يقتصر على هذا القسم الوحيد الذي رأيته. في الأساس أي شيء يمكنك إنشاؤه على الصفحة. يمكنك عمل نمط كتلة. لذلك إذا كنت تستخدم منشئ الكتل لمنشورات المدونة فقط ، وهناك عناصر معينة تريد استخدامها مرارًا وتكرارًا في منشور مدونة لتحسين تخطيط منشورات المدونة ، حسنًا ، يمكنك إنشاء نمط حظر لـ هو - هي.

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

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

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

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

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