CPT : كل الي انت محتاج تعرفه في 2024 مع الخطوات والأمثلة

22
CPT

التعريف النظري للcpt

ما هو Post ؟

عشان نفهم هو ايه لازم نفهم البوست الاول عبارة عن ايه.. البوست تعتبر صفحة وليست الا صفحة.. ولكن بيتم ادخال فيها بيانات او مدخلات “inputs” واللي هي بتكون العنوان والمحتوى والpermalink والfeatured image وغيرهم من المدخلات..

ما هو الـ Custom Post Type او CPT ؟

CPT

طيب البوست دا بقى ممكن نعمل منه انواع مختلفة وكل نوع بيتم ادخال فيه بيانات ومدخلات مختلفة وبناءا على المدخلات المختلفة دي بتتجمع كلها وبتتحط في الpost type اللي انت عملته دا بحيث كل اما تيجي تنشيء بوست جديد من النوع الجديد اللي انت عملته دا هتلاقي المدخلات موجودة فيه، توضيح بشكل ابسط انا عايز اعمل نوع بوستات جديد اسمه سابقة الاعمال فبروح ابرمجه وبعدين اعرف جواه انه بياخد مدخلات معينة زي (عنوان المشروع، وصفه، صورته، اللينك بتاعه، المهارات اللي تم تنفيذ المشروع بيها) وبعد ما بخلص الكلام دا بيظهرلي على الشمال في الـDashboard بتاعت الووردبريس ان فيه حاجة اسمها سابقة الاعمال اقدر اضيف من خلالها مشروع جديد وتظهر عندي في الموقع وطبعا بيتم تصميم صفحة الـSingle والـArchive بتاعتها، الووردبريس بينزل انواع معينة بشكل افتراضي اللي هما:

  • Post
  • Page
  • Attachment
  • Revision
  • Nav Menu

 

ما هي الـCPT الخاصة بأداة WooCommerce:

اما بتنزل اداة woocommerce على سبيل المثال مثلا بيتم انشاء custom post type جديد اسمه product ودا اللي بتدخل فيه بيانات المنتج بتاعك بالكامل والمدخلات “inputs” بتاعت البوست دا بتكون التالي:

 
  • عنوان المنتج
  • وصف قصير للمنتج
  • وصف طويل
  • السعر الاصلي
  • سعر الخصم
  • الsku
  • الfeatured image
  • البوم صور المنتج ودا غير الfeatured image
  • وغيرهم من المدخلات

أمثلة على الـCPT الموجودة في الثيمات المدفوعة:

بعض الثيمات المدفوعة اما بتنزل بينزل معاها 3 او 4 او اكتر من الـCPT ودا عشان يديك امكانيات اكبر للموقع تقدر تستخدمها ومن الCPT دي مثلا هي الـTeam Members او الـPorfolio او الـEvents او Gallery او الـFQAs او غيرهم.

 

كيفية انشاء cpt بالخطوات

مراجعة سريعة عن CPT

في الدرس اللي فات قولنا ان الـCPT هو نوع مميز وفريد من البوستات وبياخد inputs مختلفة انت بتحددها بناءا على احتياجاتك واللي برضو تقدر تصممه في الفرونت ايند عن طريق الـElementor وطبعا انت بتكون مبرمجة عشان يتماشى مع الشيء اللي عايز تنفذه وضربنا امثلة كتير على الموضوع دا.

المثال اللي هنطبقه

خلونا قبل ما نبدأ في الخطوات نفترض اننا بنعمل CPT للأفلام عشان نطبق عملي عليها وطول ما انا بشرح هوقع المثال على الـ CPT بتاع بلجن الـWooCommerce اللي هو الـ Product عشان بس الصورة توضح بشكل كامل وتكون فاهم احنا بنعمل ايه ولو اتلخبطت هتوازي الخطوة اللي بنعملها بالمشابه ليها في بلجن الـWooCommerce وبالتالي ان شاء الله هتكون معانا على الخط على طول.

التنفيذ العملي بالخطوات

اول حاجة هنحتاج ننزل 2 بلجن في الووردبريس

 
  • Custom Post Type UI
  • Advanced Custom Fields

البلجن الاولى هي اللي هتخلينا نعمل الـCustom Post Type والبلجن التانية هتخلينا نضيف الـInputs دي في الـPost Type بتاعنا اللي هنعمله.. بس من هنا ورايح هنتكلم على المدخلات دي على ان اسمها Custom Fields لان دا اسمها في الووردبريس.

 

استكمالا للكلام اللي فات فيه حاجة مهمة لازم تعرفها.. ان فيه نوعين من المحتوى الووردبريس حاططهم جواه الـPosts والـPages وبعدين احنا اتكلمنا عن الـPosts باستفاضة.. طيب المعلومة دي هتفرق معانا في ايه؟

هتفرق اني هكرر كلمة صفحة قدام وصفحة هنا مش هيكون المقصود بيها Page اللي هي نوع المحتوى لا هيكون قصدي اني عايز اعمل صفحة اللي هي بتاعت الـPost بس مش هينفع اقول عليها Post لان فيه حاجة تانية اسمها Post يعني هكون بتكلم بالبلدي مش بالمصطلحات حد فاهم حاجة؟ 

 

لو مش فاهم انسى اللي قولته وخش على اللي بعده وانا هبسطلك الكلام خالص.

 

طريقة تنزيل الـ Plugins

 

الطريقة بسيطة وهي انك هتروح على الـDashboard بتاعت الووردبريس وهتختار من على الشمال كلمة Plugins وبعدين Add New وبعدين تبحث على  الـ Plugin باسمها وبعدين هتدوس على Install وبعدين Activate وبس كدا هتعمل نفس الموضوع على الأداة التانية بنفس الخطوات.

 

استخدام بلجن الـ Custom Post Type UI

CPT

 

  • أول حاجة محتاجين ننشيء الصفحة العامة بتاعت الأفلام اللي هي زي الـShop في الـWooCommerce وبعدها هننشيء صفحة الفيلم اللي هي صفحة المنتج فاول حاجة هتعملها هتروح على الأداة على الشمال في الـDashboard اسمها CPT UI وهتدوس على Add/Edit Post Types وهتضيف اسم الSlug اللي هو اللينك بتاع صفحة الArchive بتاعت الPost Type بتاعنا اللي بنصممه وبعدين هتدخل الPlural Label اللي هو الاسم اللي بيظهر على الشمال في الDashboard اللي بيكون مكتوب فيه Products بس احنا هنا هنسميه Movies وبعدين الSingular Label اللي هو اسم البوست ايه.. وفي الحالة بتاعتنا دي هيكون Movie اللي هو Product يعني شكل البيانات في النهاية هيكون بالترتيب Movies بعدين Movies بعدين Movie. خلينا متفقين على ان الكلمات اللي كتبناها هنا دي هي هياها هتكون الـSlug فلازم تكتب حاجة معبرة وفي نفس الوقت Unique ..
  • هتنزل تحت شوية عند قسم الـ Additional Labels دي بقى لو عايز تغير شوية اسماء تانية زي Add new item احنا عايزينها Add new movie مثلا اللي هي بتوازيها Add new product وعايزين نغير Edit item الخ الخ.. عيش حياتك جواها...
  • هتنزل تحت شوية كمان عند الـ Settings بقى وركز اوي عشان دي مهمة جدا اول حاجة هتعملها هتتأكد ان (Public: True) وهتسيب كل حاجة Default زي ما هي وهتيجي تغير الـ (Has Archive: True) عشان يكون ليها صفحة Movies عامة اللي هي Shop و هتخلي الـ (Hierarchical: True) ودي انت بتقوله ان الفيلم ممكن ياخد فيلم اب (Parent) وفيلم ابن (Child) زي الصفحات Pages بيكون ليها اب وابن (Parent & Child) وزي الـCategories ودي مفيدة عشان مثلا هتحط فيلم عمر وسلمى اب وتعمل تحتها 3 افلام عمر وسلمي 1 و 2 و 3 اللي هما ال3 اجزاء يعني بالتالي فيه صفحة كبيرة وتحتها 3 اجزاء.. هتنزل تحت شوية كمان هتلاقي Supports ودي بقى الـTaxonomies اللي موجودة كدا كدا Taxonomies فلو فيه حاجة عايزها هتختارها وفيه حاجات كدا كدا اساسية زي الـTitle هتحتاجها في كل الحالات تقريبا وهتيجي عند الـTaxonomies وتسيبها فاضية عشان دي ليها قسم لوحده خالص وليها حوار تاني. وفي الاخر هتدوس Add Post Type

وكدا مبروك عليك اول خطوة احنا عملنا CPT جديد !!

CPT

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

ولكن لحد هذه المرحلة هكتفي بالشرح دا وان شاء الله الدرس الجاي هنتعلم الـTaxonomy ودي حمادة تاني خالص ولو مفهمتوش يبقى عليه العوض في الـCPT كله ..

متنساش انك تقدر توظف حد من Developist Fix عشان يعملك CPT انت عايزها حسب دماغك واحتياجاتك بطريقة احترافية <3

ازاي تعمل Taxonomy

الـTaxonomy دا اهم حاجة في الـCPT

خلصنا الجزء دا تماما خش بقى على اللي تحتها اللي هيAdd/Edit Taxonomies ودي بقى يا معلم اللي هي تقسيمة الافلام وحط مليون الف خط على كلمة تقسيمة الافلام دي عشان مهمة جدا وليها دلالات كتير.. ايوة عايز تقولنا ايه يعني عايز اقولك بشكل مبدئي ان دي اللي هي الـCategories والـTags ايوة بس كدا؟ لا مش بس دي تعتبر تقسيمة الافلام.. يادي النيلة ايوة يعني ايه يعني؟ يعني هتشوف انت عايز تقسم الدنيا عندك ازاي وهتقسمها في ورقة خارجية وتيجي تنفذ على الـTaxonomies يعني انا عايز اقسم اول حاجة الموقع ل5 حاجات رئيسية هينزل من تحتهم كل حاجة (افلام عربي/افلام اجنبي/مسلسلات تركية/مسلسلات انمي/مسرحيات) تمام كدا الصورة وضحت؟ طيب التقسيمة دي اسمها ايه؟ اسمها انك بتضيف Taxonomy طيب افرض عايز اعمل تقسيمة فوق التقسيمة؟ بتعمل واحدة جديدة وتسميها مثلا نوع الفيلم وتحط مثلا 12 نوع اللي هما (اكشن/رومانسي/كومدي/رعب/دراما/الخ…) طيب افرض عايز اقسمهم تاني لحاجات تانية مش جاية في بالي دلوقتي هتعمل ايه؟ هتضيف Taxonomy جديدة برضو وهاكذا…

CPT

طيب هنضيف بقى الـTaxonamy ازاي؟

 
هتروح على نفس الـPlugin اللي هي CPT UI وهتختار المرادي Add/Edit Taxonomies زي ما اتفقنا فوق.. هتلاقي الواجهه شبه اللي كانت في Add/Edit Post Types … تمام كدا هنقول بشكل سريع بقى.. 
 
 
  • الـTaxonomy Slug هي اسم اللينك بتاع الـTaxonomy اللي هو شبه لينك الـCategory زي في الـWooCommerce اما بيكون لينك تصنيف معين زي كدا https://www.ecommerce-name.com/shop/dresses/ والاسم دا هو اللي هيظهر على الشمال تحت الـCPT بتاعنا اللي اسمه Movies وفي حالتنا دي هنسميه Movie Category او Movie Type او الاسم الصح هو Movie Genres
  • الـPlural Label هو الاسم اللي هيظهر فهنخليه نفس الـTaxonomy Slug عشان كل حاجة تكون شبه بعض ومنطقية
  • الـSingular Label هو اسم كل Genre فهنسميه Genre بكل بساطة
  • الـAttach to Post Type دي بقى بتقوله هو الـTaxonomy دا موجود في انهي CPT من اللي موجودين في موقعك؟ طبعا هتختار الـCPT بتاعك بس انا عايزك تركز اوي في النقطة دي.. انت ملاحظ انه حاططلك كل اللي عندك في الموقع صح؟ عارف دا معناه ايه؟ دا معناه انك تقدر تضيف تقسيمة جديدة لأي CPT عندك في الموقع .. لو هنضرب مثال مثلا خلينا نقول ان الثيم نازل معاه CPT مثلا بيخليك تنزل وظائف في الموقع عندك تمام؟ والوظائف دي متقسمة على حسب الـIndustry فانت عايز تعمل تقسيمة جديدة غير اللي موجودة والاتنين يفضلوا شغالين والتقسيمة دي مثلا على حسب الـPersonal Skills بتاعت الوظيفة.. فبتقوم تعمل Taxonomy جديدة بالطريقة اللي شرحناها دي وبتختار الـCPT اللي موجود عندك اصلا يعني مش بتروح تعمله من البداية لا هو اصلا موجود وانت بتزود عليه بس تقسيمة جديدة.. فاهم حاجة؟ لو مش فاهم skip الجزئية دي وخليك في اخر خطوة عملناها مع بعض (مش هيأثر معاك في حاجة)

تعالى على الجزء اللي بعده اللي هو Settings ودا سهل جدا مش محتاج اي شرح لو قريته هتفهمه بس خليني اشرحلك اهم الحاجات اللي تعملها..

 

اولا هتتأكد ان كل دول معمولين True عشان دي الاعدادات اللي 90% من الحالات والاستخدانات هتكون True الحاجات دي هتكون (Public / Public Queryable / Show UI / Show in menu / Show in nav menus / Rewrite)

 

ثانيا بقى هتيجي عند الـHierarchical لو هتعملها True هتروح على Rewrite Hierarchical تعملها True برضو… طيب هي دي ايه اصلا؟ مش احنا قولنا قبل كدا ان الـTags والـCategories دول يعتبروا بيعملوا تقسيم للـCPT ؟ مع انهم مش شبه بعض صح؟ ببساطة الفرق الوحيد بين الـTags والـCategories ان الـCategories تقدر تتقسم تقسيم هيكلي على عكس الـTags كل قيمة بتاخدها بتكون منفصلة عن اي قيمة تانية.. يعني ايه الكلام دا؟ يعني الـCategories بتاخد Parent Category و Child Category يعني ليها اب والاب ممكن ياخد اب ويكون فيه Levels ليها واكبر مثال عملي على دا عشان الفكرة توضح اكتر ان انت مثلا عندك متجر ملابس وعندك بناطيل مثلا فبتعمل ايه؟ بتعمل Parent Category اسمه بناطيل وتعمل واحد تاني تحته Child Category اسمه بناطيل جينز وواحد تاني تحت بناطيل برضو اسمه بناطيل سكيني وواحد تاني اسمه سويت بانتس مثلا يبقى كل دول كدا Child Categories موجودين تحت الـParent Category واحد اسمه بناطيل… اتمنى تكون وصلت!

 

فبختصار لو انت عايز التقسيمة تكون غير قابلة للهيكلة ولو لسا مش فاهم بص على الصورة بتاعت الدرس هتفهم يبقى هتخلي الـHierarchical تاخد قيمة False ولو عايزها قابلة للهيكلة هتديها قيمة True

ازاي تعمل custom fields

مراجعة على الدرس السابق

مراجعة سريعة اسرع من سرعة الضوء، المرة اللي فاتت عرفنا ان فيه حاجة اسمها Taxonomy وعرفنا اهميته وبيعمل ايه بالظبط وعرفنا ان دا المسؤول على هيكلة الـCPT بتاعي اللي انا بعمله وانا اللي بصمم شكل الهيكل او الشكل الهرمي للتقسيمة بتاعتي اللي حابب انفذها.

فقرة تمهيدية

النهارة بقى هنخلي الـMovie ياخد بيانات انا اللي احددها زي مثلا ان كل فيلم محتاج ياخد سنة النشر وبطولة مين وانتاج مين واسم الفيلم ونبذة قصيرة عن الفيلم ولغة الفيلم واسم المخرج والبلد والكوفر بتاع الفيلم ولو هنعمل مثلا اننا نقدر نحط لينك فيديو على اليوتيوب نحط اللينك بتاع الـTrailer بتاعه… طيب كل الكلام دا هيتم ادخاله على كل فيلم بحيث يظهر في كل مرة تيجي تعمل فيها Add a new movie فهيطلب منك تكتب كل البيانات دي.. بس من هنا ورايح مش هنسميها بيانات لان اسمها الحقيقي هو مدخلات او inputs بس برضو احنا مش هنسميها مدخلات ولا inputs احنا هنسميها custom fields ! لان ببساطة دا الاسم المستخدم في الووردبريس…

الخطوات العملية

هتروح اول حاجة على Plugin الـCustom Fields وهتدوس على Add New Field Group دا اللي هو يعني هتعمل Custom Fields كتير وهتحطهم كلهم في جروب مع بعضهم عشان بعد كدا هناخد الجروب دا نقوله اظهره في الـCPT بتاعنا.. المهم هتختارها…

اول ما هتفتح معاك هيظهرلك 3 اقسام تحت العنوان، هنمسكهم قسم قسم بس الاول اكتب العنوان Movies cf مثلا وتعالى تحتها بقى هتلاقي قسم ملوش عنوان كدا بس فيه جدول مكتوب فيه (Order / Label / Name  Type) هتدوس على Add Field ودا معناه اننا هنعمل input جديد او custom field جديد.. اول ما تدوس هيظهرلنا قايمة كبيرة وعريضة ياريت متتخضش من اللي هيتفتحلك.. هنقول كل حاجة بالتفصيل.

بس قبل ما نكمل حابب اقولك حاجتين الاولى هي ان انا هشرح مرة واحدة بس على custom field واحد بس وانت طبق الباقي حسب فهمك للشرح لان لو طبقت كله المقال هيطول بلا اي داعي… الحاجة التانية بقى هي ان فيه بعض الـinputs اللي موجودة كدا كدا في الووردبريس زي اسم الفيلم اللي هو الـPost Title او في حالتنا دي اسمه Movie Title وكوفر الفيلم اللي هو الـFeatured Image والوصف كمان.. يعني احنا هنعمل باقي الحاجات بقى وانا هطبق على الـcustom field اللي اسمه “اسم المخرج” بس كدا يللا بينا بقى نبدأ….

للتنويه انا هقول لفظ مستخدم كتير هنا ودا هيكون راجع ليك او للي هيستخدم الموقع بعدك لان انا بتكلم عليك على انك مبرمج مش صاحب موقع… يعني من الاخر مش هيكون قصدي مستخدم على زوار الموقع تمام؟ دوست بقى على الـAdd Field خلاص؟ هيظهرلك 10 حاجات بالظبط وشرحهم كالتالي:

 
 
  • Field Label : هنا هتكتب الاسم اللي هيظهرلك عند الـcustom field عشان يفكرك ان دا هتكتب فيه اسم المخرج يعني ببساطة هتكتب "اسم المخرج" او "Director" هتكتب كدا حرفيا مش هتكتب اسم شخص لا هتكتب الكلمة نفسها..
  • Field Name : هنا هتكتب نفس الكلمة بس منغير مسافات لوكانت مكونة من كلمتين ولو هي عربي هتكتبها انجليزي ودا الاسم اللي هياخده الـPlugin عشان يبرمج بيه الـcustom field
  • Field Type: دا بقى نوع الـinput ودا لازم ياخد قيمة واحدة بس مينفعش يبقى حاجتين وببساطة دا معناه ايه هو نوع البيانات اللي هيستقبلها الـinput دا ؟ يعني انت هتسمح للمستخدم يحط ايه بالظبط في الـinput ؟ هل ارقام فقط؟ هل حروف فقط؟ هل هتسمح بادخال مرفق او ملف؟ هل هتسمح بادخال رابط؟ طبعا هقول تاني لازم تختار حاجة واحدة بس... الناس بتوع البرمجة فاهمين كويس يعني ايه data types انواع المدخلات دي بتعرفها عشان تجبر المستخدم انه يحط نوع معين من المدخلات يعني اما تيجي تعمل مثلا تاريخ النشر هتختار ارقام وهاكذا ... اظن الفكرة وصلت .. احنا في الحالة بتاعتنا هتكون text
  • Instructions :دي ببساطة لو عايز تكتب شرح للـcustom field عشان يظهر للمستخدم وهو بيضيف فيلم وشاف المكان دا فممكن نكتب مثلا "قم بادخال اسم المخرج"
  • Required?: انت عايز المستخدم يدخل الـcustom field دا بشكل اجباري؟ لو اه فعل الخيار دا..
  • Default Value : دا بيقولك انت عايز قيمة معينة تكون مكتوبة بشكل افتراضي بحيث لو المستخدم مكتبش حاجة ياخد القيمة دي؟ او حتى لو هيكتب هل عايز يكون مكتوب حاجة جاهزة جوة حقل الكتابة وهو يمسحها ويكتب اللي هو عايزه؟ دي هسيبها فاضية او هكتب كلمة "غير معرف"
  • Placeholder Text : دا هكتب فيه "اسم المخرج" الكلمة هتظهر داخل حقل الكتابة بس مش هيكون ليها اثر او مش متاخده كقيمة زي الـDefault Value انا عن نفسي هكتبها زي الـField Label واريح دماغي
  • Character Limit : هنا لو عايز تاخد الاسم يكون اقصاه عدد معين من الحروف ودي مهمة عشان المستخدم ميكتبش اسم المخرج هو وعيلته وعيلة عليته وعيلة كبار عائلته لحد ابونا ادم.. هخليها 15 حرف بس.
  • Conditional Logic: دي هسيبها No دلوقتي عشان حاجة احترافية زيادة عن اللزوم بس عموما دي معناها لو عايز الـcustom field دا يظهر لو فيه شرط معين المستخدم هيحققه.. والخيار دا مش عيكون ظاهر مع اول custom field تعمله هيظهر في اللي بعده.. هسيبهالك تجرب فيها بنفسك ولو فيه عندك سؤال اكتبلي تحت في الكومنتات
  • Wrapper Attributes: دي ملهاش لازمة اوي يعني الا لو هتكتب كود انت ممكن بس تحط الـwidth على 50% عشان حقل الكتابة صغير بحيث تستفيد من المساحات بس لازم اللي بعده يكون 50% زيه عشان يكونوا الاتنين على نفس السطر في الواجهه او سيبه فاضي وريح دماغك.

فيه عندك حاجة اسمها Prepend و Append ملهمش لازمة دول زي الـprefix والـsuffix كدا…

الحمد لله كدا خلصنا اول custom field لينا هتكرر العملية دي بقى لكل نوع مدخلات انت عايزه (اتكلمنا عنهم فوق)

فاكر ال3 اقسام اللي قولتلك عليهم فوق؟ احنا كل دا في القسم الاول… تعالى بقى على القسم التاني اللي هو Location ودا بقى يا معلم ببساطة هتختار مكان الـPost اللي هو اخر خيار هتختار مكانه اسم الـCPT بتاعك اللي هو Movies….

القسم التالت الحمد لله اعداداته كلها تمام التمام مش هتقرب منه خالص..

 

خلصنا الحمد لله دوس Publish بقى ومبروك عليك

لا كدا مبروك بجد مفيش حاجة تاني تعملها في البلجنز كدا الـCPT اتعملت بالكامل.. مفضلش غير انك تصممها…

اقرأ المزيد:  ما هي أفضل 3 بدائل للالمنتور؟

 

تعالى نجرب الموضوع بقى بعد ما خلصناه؟

هتروح على الـCPT بتاعنا في الجنب على الشمال اللي هو اسمه Movies وتعمل Add new Movie وتجرب بقى كل اللي انت عملته وتضيف تصنيفات و tags وعيش حياتك يا معلم ولو فيه حاجة مش مظبوطة ارجع ظبطها..

اخر درس في CPT

اخيرا اخر درس في السلسلة دي.. دا اسهل درس تقريبا هناخده في الـCPT ودا الاخير، لو وصلت للدرس دا احب اقولك برافو على مجهودك اللي باقي كله كلام فاضي..

مقدمة

في الدرس دا هنتعلم ازاي نصمم صفحات الـCPT اللي هما صفحتين.. صفحة الـSingular Page وصفحة الـArchive Page وعشان تكون عارف الصفحتين دول موجودين في اي CPT في الووردبريس، وببساطة صفحة الـSingular هي الصفحة الفردية للـCPT اللي هي صفحة الفيلم اللي هيظهر فيها كل الـCustom Fields كلها واللي اتكلمنا عنها بالتفصيل وازاي نعملها في الدرس اللي فات تقدر تتابع الهاشتاج دا عشان توصل لكل الدروس #cpt .. وصفحة الـArchive دي الصفحة اللي فيها الافلام كلها، وزي ما كنا متفقين اننا هنقارن كلامنا بالـCPT بتاع الـWooCommerce فخلوني اقولكوا ان الـSingular هو صفحة المنتج اللي بيظهر فيها الصورة والعنوان والسعر والكلام دا كله.. وصفحة الـArchive هي صفحة الـShop … دا كدا ببساطة واعتقد الفكرة وصلت… 

تنزيل الـPlugins المطلوبة لل CPT

اول حاجة هتروح تنزل 2 بلجنز ودول اللي هنصمم بيهم..

CPT

 
  • Elementor
  • Elementor Pro

هتقولي Pro ؟ ودي اجيبها منين دي ؟ هنروح بقى نشتري وندفع فلوس واصلا الدولة المصنعة للبلجن دي موجودة في مكان مش عارف ماله وكلام كدا كتير وبلا بلا… هقولك اخويا المطور… الكلام اللي بتقوله دا عيب…. هسيبلك لينك في اخر الدرس ومش هقولك بيعمل ايه عشان البوست مياخدش مخالفة ويتمسح… تمام كدا؟ انا قولت حاجة؟ انا مقولتش حاجة ومتقولش لحد بقى اني مقولتش حاجة هاااا؟؟ 😂

اقرأ أكثر: ما هو الفرق بين المنتور والمنتور برو؟

 

انشاء Template جديد

هتنزلهم وتسطبهم عندك في الموقع عادي جدا بدون اي حاجة مختلفة.. هتروح بقى على الـDashboard بتاعت الووردبريس وتدوس على كلمة Templates اللي على الشمال ودايما دايما هتلاقيها موجودة تحت كلمة Elementor بالظبط .. المهم هتدوس عليها وتروح على اول واحدة اللي هي Saved Templates هيتفتحلك قايمة كدا فيها كل الـTemplates اللي عندك او هتكون فاضية، ميهمناش الكلام دا انت هتروح تعمل Add New على طول..

 

هيطلعلك الشاشة اللي في الاسكرين شوت دي وهنا بيقولك ايه نوع الـTemplate اللي عايز تعمله؟ هنا بقى ييجي دور الـElementor Pro احنا عايزين نعمل Single وعايزين نعمل Archive بس الاول خلونا نعمل الـSingle فهختار الـSingle Post وبعدين هكتب اسمها مثلا The Movie Template وبعدين هتدوس CREATE TEMPLATE..

 

ملحوظة مهمة قبل التنفيذ

اول ما تعمل Create هيظهرلك واجهه الووردبريس عادي جدا اقفل الشاشة اللي هتطلعلك اللي بيكون فيها انك تقدر تستخدم تصميمات من عندنا والكلام دا مش محتاجينه.. روح على الادوات بتاعت الالمنتور على طول اللي هي موجودة على الشمال، هنعمل ايه بقى دلوقتي؟ اول حاجة قبل ما تبدأ اي حاجة في التصميم امسك ورقة وقلم وفرغ كل افكارك ودماغك في ازاي هتصمم الصفحة عشان لو معملتش كدا عليه العوض في الدرس دا كله وهتطلع حاجة وحشة جدا… انا هعمل مثلا ان كوفر الفيلم على الشمال والكتابة على اليمين بنفس تصميم صفحة المنتج في الـWooCommerce … طبعا دا تصميم غير ابداعي وفيه حاجات تانية تحفة اكتر من كدا مليون مرة بس انا بقول مثال عشان كلنا عارفين صفحة المنتج عاملة ازاي بس مش اكتر….

 

قبل ما نبدأ التصميم هتلاقي العناصر في الـElementor قليلة اوي ومش كلها ظاهرة ودا بسبب اننا مختارين ان الـTemplate اللي هنعمله دا بتاع Single Page مش صفحة عادية… يعني متتخضش من المنظر دا الطبيعي..

 

تصميم الـSingular Page بالالمنتور

اول حاجة هعمل عمودين في الـElementor وهحط على الشمال صورة هتلاقي اسمها Featured Image تمام؟ طيب اول ما تحط الصورة هتلاقي صورة عشوائية ظهرت او صورة مش موجودة.. طيب الصورة دي هحط فيها ايه؟ دي مش هتحط فيها حاجة… هو كدا هيقرا بشكل تلقائي ان الصورة دي هيحط فيها الـFeatured Image اللي انت هتختارها وقت ما تيجي تنزل الـMovie تمام كدا؟ خش في اللي بعده..

 

دلوقتي انا عايز اظهر الـdata الكتابية زي العنوان والوصف والكلام دا في صفحة الـSingular Page فتعالى معايا على شمال كدا وخد الـPost Title وحطه على طول جنب الصورة منغير ما تفكر .. هتقولي Post Title ؟ هو دا Post ؟ هقولك يبقى انت مش متابع الدروس من اولها بقى قولنا ان كل دا احنا بنعمل Custom Post Type ودا يعتبر Post بس الـType بتاعه مختلف.. ارجع للدروس اللي فاتت خاصة الدرس الاول… طيب وبعدين؟ هتروح على Post Info وتحطها تحت الـTitle دا هيظهر مين اللي نشر الصفحة دي وتاريخ نشرها عشان تقول للزوار ان الصفحة اتنشرت امتى وتعالى تحتها حط الـPost Content ودا اللي هو الـDescription تمام لحد هنا؟ لو عايز تستخدم اي عنصر تاني استخدمه عادي كل حاجة واضحة من اسمها… ركز معايا في اللي جاي بقى…

 

تعالوا نرجع للدرس اللي فات كمراجعة وعشان حاجة هنحتاجها دلوقتي.. الدرس اللي فات قولنا ان فيه Custom FIelds وعرفنا ازاي بنضيفها صح؟ كانت ايه فاكر؟ كانت تاريخ اصدار الفيلم / مخرج الفيلم / منتج الفيلم / ستيديو التصوير / البطل / الممثلين الخ الخ الخ… فاكرين صح؟ انا بقى عايز اظهر الحاجات دي تحت الـDescription هعملها ازاي؟

 

هتروح على اي عنصر كتابة زي الـHeading مثلا وهتسحبه تحت الوصف هتلاقيه ظهر ومكتوب كلام وتقدر تعدل عليه في البوكس بتاعه عادي جدا صح؟ هتلاقي ايقونة كدا فوق على اليمين جوة البوكس اللي بتكتب فيه لو حطيت الماوس عليها هتلاقي مكتوب Dynamic Tag ودي بقى حرفيا هي اللي هتعمل السحر كله… هدوس عليها وهختار Post Custom Field وبعدين هيظهر قائمة منسدلة كدا اللي هي الـSettings وهتلاقي حاجة اسمها Key وحاجة اسمها Custom Key هتدوس على الـKey وهتختار الـCustom FIeld اللي محتاج تظهره اللي هو مثلا “اسم البطل”… طيب انا دوست وملقتش اى حاجة من الـCustom Fields اللي انا عاملها!!! اعمل ايه؟ هتروح للـCustom Key وتكتب الـField Name بتاع الـCustom Field اللي انت عايز تظهره ولازم تكتبه بالمللي بالظبط زي ما انت كاتبه ياريت تاخده Copy/Paste ولو مش فاكر ايه الـField Name اصلا ارجع للدرس الخامس… وكدا يا معلم مبروك الصفحة اتصممت بنجاح.. انا كدا عملت ايه؟ كدا انا قولتله ان الـHeading دا انا مش هكتب فيه حاجة ثابتة … لا دا هيكون متغير حسب الفيلم طيب تمام متغير بس هياخد داتا صح ؟ اسم الداتا ايه؟ اسمها “اسم البطل” انا كدا بقول للعنصر روح شوف يا عنصر انا حاطط اسم البطل ايه واظهرها هنا..

وصلت؟؟

 

طبعا انا عملت الكلام دا على اسم البطل بس، انما انت بقى هتكرر العملية عشان تظهر باقي البيانات اللي انت عايزها تمام كدا فاضل ايه؟ فاضل اخر خطوة اللي هي الـPUBLISH ، بكل بساطة هتدوس Publish من تحت زي ما انت متعود بس المرادي هتلاقيه ظهرلك شاشة كدا اسمها Conditions وهنا بقى احنا هنربط الـTemplate دا بالـCPT بتاعنا واللي منغيره مفيش حاجة هتسمع في شغلك… ببساطة شديدة هتسيب INCLUDE زي ما هي وهتيجي على الخيار اللي جنبها تدور على اسم الـCPT بتاعك اللي هو Movie وبس كدا هتدوس PUBLISH والف الف الف مبروك عليك بقيا تعرف كل حاجة عن CPT 

 

كتب بواسطةيوسف أبرامو

نشرت في

فئةووردبريس

الآراء22

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

مقالات ذات صلة ...

التعليقات معطلة.