كيفية إضافة زر مخصص إلى وردبريس

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

في النهاية، فإن معرفة كيفية إضافة زر في ووردبريس (how to add a button in wordpress) — زر متميز يختلف عن الأزرار التقليدية في الصفحات الأخرى — قد يصنع الفارق بين كسب عميل جديد أو خسارته. لكن هذا الأمر أسهل بكثير من الفعل. فبينما يوفر ووردبريس خيارات لتخصيص الأزرار في محرر غوتنبرغ (Gutenberg)، إلا أنها تظل أساسية للغاية. وغالبًا ما يقع المستخدمون في حيرة بسبب إعدادات الألوان المربكة وغياب خيارات الرسوم المتحركة (Animations). إذا كنت ترغب في تصميم زر CTA مميز وفريد، فلن يساعدك محرر غوتنبرغ كثيرًا. 

لتجاوز قيود الأزرار في ووردبريس، لديك خياران: إما تثبيت إضافة (plug-in) أو مكون إضافي ثقيل من طرف ثالث، أو استخدام أداة (widget) مجانية وخفيفة الوزن لا تعتمد على الخادم لتبقي على سرعة صفحتك وتحمي كود القالب الخاص بك. يشرح هذا الدليل كيفية عمل كل خيار حتى تتمكن من تحديد الأنسب لموقعك الإلكتروني.

Watch on youtube

How to Add a Custom Button to Wordpress

الخيار 1: تثبيت إضافة مخصصة لأزرار ووردبريس أو استخدام كود CSS مخصص

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

قبل استكشاف هذه الخيارات، انتبه للعيوب المحتملة التالية:

• تستخدم بعض الإضافات كميات هائلة من ملفات JavaScript و CSS، مما قد يؤدي إلى إبطاء وقت تحميل الصفحة ويضر بنتيجة مؤشرات أداء الويب الحيوية (Core Web Vitals) الخاصة بموقعك. 
• لا يقوم المطورون دائمًا بتحديث الإضافات باستمرار. قد يؤدي هذا إلى مشكلات في الأداء مستقبلاً، كما أنه يضيف مهمة أخرى إلى قائمة الأشياء التي يتعين عليك مراقبتها.
• قد يؤدي استخدام كود CSS مخصص غير صحيح إلى تجاوز إعدادات الأزرار العامة الحالية لموقعك، مما يؤثر على مظهر الأزرار الأخرى في جميع أنحاء الموقع. كما يمكن أن يؤثر ذلك على توافق موقعك مع الأجهزة المحمولة.

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

1. انقر فوق خيار الإضافات (Plugins) في لوحة تحكم إدارة ووردبريس. اكتب الميزة التي تحتاجها في شريط البحث. في هذا المثال، أدخلنا “custom CTA button WordPress”.

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

3. عندما ينتهي تثبيت الإضافة، انقر فوق زر تفعيل (Activate). اتبع تعليمات المطور لإنشاء زرك المخصص. 

إذا كنت بارعًا في استخدام CSS، يمكنك كتابة كود زر CTA المخصص الخاص بك. للقيام بذلك، اتبع الخطوات التالية:

1. انقر فوق مظهر (Appearance) > المحرر (Editor) في لوحة تحكم إدارة ووردبريس. إذا كنت تستخدم قالبًا كلاسيكيًا أو قالبًا من طرف ثالث، فانقر فوق مظهر > تخصيص (Customize). 

2. انقر فوق الأنماط (Styles) > ⋮ > تنسيق CSS إضافي (Additional CSS). في القوالب الكلاسيكية وقوالب الطرف الثالث، انقر فوق تنسيق CSS إضافي.

3. اكتب كود CSS المخصص لزرك في مربع النص.

بدلاً من برمجة زرك بنفسك، يمكنك تجربة بديل لكود CSS المخصص في ووردبريس: أداة زر Jotform (Jotform Button Widget). سنستكشف هذا الخيار في القسم التالي.

الخيار 2: إضافة أداة زر مجانية وقابلة للتخصيص (موصى به)

باستخدام أداة زر Jotform، يمكنك إنشاء زر CTA بتدرجات ألوان فريدة، وأيقونات، وتأثيرات تمرير (hover effects). لن يؤثر هذا الخيار على كود CSS الخاص بموقعك أو يقلل من سرعة تحميله، لأنه يعمل عبر كود تضمين مستضاف وموثوق.

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

1. انتقل إلى أداة زر Jotform (Jotform Button Widget) واملأ المعلومات الأساسية حول زرك. انقر فوق متابعة (Continue).

2. أضف الألوان، والأيقونات، وخيارات التنسيق الأخرى. يمكنك تعديل تصميم الحواف، والمسافات البادئة (padding)، وحجم النص، والخطوط، أو إضافة ظل (drop shadow) لمزيد من التأكيد. عند الانتهاء، انقر فوق متابعة (Continue).

3. راجع وحدد خيارات التخطيط الخاصة بك، ثم انقر فوق جربه على موقعك مجانًا (Try it on your website for free).

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

يمنحك بديل Jotform المجاني والخالي من الأكواد لزر دعوتك لاتخاذ إجراء (CTA) في ووردبريس تحكمًا كاملاً في مظهر زرك ووظيفته. سواء كنت ترغب في تخصيص النص، أو الألوان، أو زوايا الحدود، أو إضافة تأثير حركة عند التمرير، فإن Jotform جاهز لتلبية احتياجاتك. 

عزز موقع ووردبريس الخاص بك بأدوات ذكية لا تعتمد على الخادم

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

• أداة تقييمات Google (Google Reviews Widget): تعرض تقييمات علاماتك التجارية على Google وفقًا لتفضيلاتك.
• أداة مؤقت العد التنازلي (Countdown Timer Widget): توضح للزوار الوقت المتبقي لهم لاتخاذ إجراء معين، مثل التسجيل في فعالية ما.
• أداة الأسئلة الشائعة (FAQ Widget): توفر أداة أسئلة شائعة قابلة للبحث مع إجابات غنية بالوسائط وتصميم مخصص.
• نماذج ووردبريس (WordPress Forms): تتيح لك إنشاء نماذج مخصصة وتضمينها في موقعك الإلكتروني.

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