كيفية بناء بطاقات مراجعة الكتب والكتب باستخدام قوالب WordPress

كنت متعمقًا في نظام الكتل خلال الأشهر التي سبقت ظهوره لأول مرة في عام 2018. وحدث هذا أيضًا تزامنًا مع أول شهر تشرين الثاني (نوفمبر) الذي أكملت فيه الشهر الوطني لكتابة الروايات ، وهو تحدي لمدة 30 يومًا لكتابة 50000 كلمة المسودة الأولى لرواية. لقد فزت منذ ذلك الحين للمرة الثانية في عام 2021.

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

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

لم أُطلق موضوع الروائيين إلا بعد شهور - لقد كان طفلاً لمشروع آخر لم يتم إطلاقه بعد.

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

أنا أستخدم موضوع Archeo بواسطة Automattic خلال هذا البرنامج التعليمي. ومع ذلك ، يجب أن يعمل مع أي سمة تدعم الكتل. ستحصل أيضًا على المزيد من الأميال من سمة الكتلة.

بطاقة الكتاب

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

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

الخطوة 1: مجموعة الحاويات (اختياري)

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

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

الخطوة 2: إضافة الوسائط

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

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

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

الخطوة 3: المجموعة (اختياري)

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

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

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

الخطوة 4: محتوى البطاقة

يجب أن تكون الخطوة الأخيرة في إنشاء بطاقة الكتاب مباشرة نسبيًا. لقد قمت بتضمين عنوان وفقرتين وكتلة أزرار. أنا أشجع التجريب.

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

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

بطاقة مقدمة لمراجعة الكتاب

ستأخذك هذه الإرشادات خلال إنشاء بطاقة مراجعة كتاب (أو مقدمة مراجعة). كما كان من قبل ، يمكنك قطع كتلة HTML الكاملة من Gist. يجب أن تبدو النتيجة قليلاً مثل ما يلي:

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

لأولئك الذين يريدون المزيد ، هناك حلول قائمة. تعد مجموعة مراجعة كتاب Donna Peplinskie خيارًا ممتازًا. يحتوي على تكامل ISBN ومخطط المراجعة والكثير من الأجراس والصفارات الأخرى. حتى أنني كتبت عنها مرة أخرى في عام 2020.

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

الخطوات من 1 إلى 3: اشطفها وكررها

هذه الخطوات هي نفسها تمامًا مثل بطاقة الكتاب أعلاه: إضافة كتلة مجموعة وإضافة وسائط ونص وتداخل مجموعة أخرى داخل منطقة المحتوى. كان التغيير الوحيد الذي قمت به هو توسيع قسم الوسائط إلى 40 (كان 35 قبل ذلك).

لا تتردد في خلط هذا وتجربة أشياء جديدة. تخطي كتلة المجموعة الأولية إذا كنت لا تريد الخلفية المبطنة.

الخطوة 4: محتوى البطاقة

مثل بطاقة الكتاب السابقة ، أضف كتلة عنوان لعنوان الكتاب. يذهب هذا داخل المجموعة المتداخلة داخل كتلة الوسائط والنص.

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

• بقلم جاستن تادلوك
• خيال الكبار الموسوم
• تم النشر بواسطة Words & Press
• نُشر في 01 مايو 2099
• 599 صفحة
• / 5 نجوم

كنت أرغب في إضفاء البهجة على الأشياء ببعض الرموز التعبيرية. إذا لم يكن هذا هو الشيء الذي تفضله ، فلا داعي لتضمينه.

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

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

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