كيفية إضافة عنصر واجهة مستخدم إلى رأس WordPress الخاص بك

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

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

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

إذا كنت ترغب في إضافة الأداة إلى موقع الويب الخاص بك ، فانتقل إلى عنوان URL حيث تريد إضافته والصق الرمز قبل إغلاق علامة HTML / body>. من الضروري تضمين الرمز في كل صفحة ويب حيث ستظهر الأداة. تأكد من إعداد جدار الحماية الخاص بك للسماح بظهور أدوات الويب (الكلاسيكية).

كيف يمكنني إضافة عنصر واجهة إلى رأس موقع الويب الخاص بي على WordPress؟

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

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

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

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

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

كيفية إضافة رأس مخصص في ووردبريس

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

كيف أضيف أشياء فوق رأسي في WordPress؟

في WordPress ، يمكنك إضافة محتوى أعلى رأسك عن طريق إنشاء قالب رأس مخصص. سيحتوي هذا القالب على الكود اللازم لعرض المحتوى الذي تريده أعلى رأس الصفحة. يمكنك بعد ذلك إضافة هذا القالب إلى قالب WordPress الخاص بك عن طريق إضافة الكود التالي إلى ملف header.php الخاص بالسمة: / * Template Name: Custom Header Template * /؟ > يوجد رأس الصفحة في الجزء العلوي من الصفحة على موقع WordPress على الويب. يوجد ملف اسمهheader.php في مجلد النسق النشط ويعمل كموقع للمحتويات. للعثور على الملف وتحريره ، انتقل إلى صفحة مسؤول WordPress وانتقل إلى ملف محتوى WordPress. بعد فتحه في محرر التعليمات البرمجية ، يمكنك إجراء أي تغييرات ضرورية. تأكد من تحديد السمة النشطة الحالية في الشريط الجانبي الأيمن: سيتم تسمية header.php بعنوان رأس الموضوع حتى يمكن العثور عليه بسهولة. تأكد من تحديد خيار تحديث الملف. عند إجراء تغييرات على التعليمات البرمجية ، سيجري WordPress فحصًا سريعًا لـ PHP للتأكد من أن تغييراتك لا تسبب أي مشاكل. Header Widget FlutterCredit: تُستخدم أدوات GitHubHeader في Flutter لعرض رأس أعلى الشاشة. تُستخدم هذه الأداة عادةً لعرض عنوان أو رمز أو مزيج من كليهما. تُستخدم أداة الرأس أيضًا لعرض شريط البحث والدرج وعناصر الإجراءات الأخرى. نوصي باستخدام واحدة من أفضل حزم واجهة المستخدم لـ Flutter. يجب تضمين رأس التطبيق Flutter وحزم الحوار والمكونات الإضافية في القائمة. يمكّنك خيار الرؤوس اللاصقة من وضع رابط محتوى لاصق على محتوى قابل للتمرير سيظل مرئيًا أثناء تمرير الحاوية. RFlutter Alert هو مربع حوار منبثق قابل للتخصيص بدرجة عالية وسهل الاستخدام. يعرض تطبيق Cool_alert تنبيهات حالة الإخفاء الذاتي على غرار Apple. يتضمن Common Flutter مجموعة كبيرة من الميزات مثل مربعات حوار التنبيه ووظائف الامتداد والمزيد. Easy Dialog هي أداة تمكّنك من إنشاء مربعات حوار مخصصة أو أساسية بسرعة وسهولة. يعرض هذا المكون الإضافي الذي يدرك النظام الأساسي مربعات حوار وتنبيهات على كل من أجهزة Android و iOS. يمكنك فتح نافذة Kumi بالضغط على زر KUMI. نافذة منبثقة يمكن عرضها في مواضع متعددة على شاشتك. إنها بسيطة وفعالة كيفية إنشاء رؤوس مستجيبة في Flutte عند استخدام عنصر واجهة مستخدم Sticky Headers في Flutter ، يمكنك بسهولة إنشاء محتوى جميل وسريع الاستجابة. أثناء تمرير المحتوى ، تضع الأداة رأسًا في الجزء العلوي من الحاوية ، والتي تظل هناك حتى يتم تمرير المحتوى. إذا كنت تريد أن يكون رأسك مرئيًا في جميع الأوقات ، فضعه في أعلى الحاوية بهذه الطريقة. بالإضافة إلى هذه الأداة ، يمكنك إنشاء مربع حيث يمكنك التمرير عبر عنصر واجهة مستخدم واحد. إذا كانت هناك حاوية واحدة فقط ، مثل وجه الساعة في منتقي الوقت ، فهي مفيدة ؛ ومع ذلك ، إذا كان صغيرًا جدًا في محور واحد (اتجاه التمرير) ، فلا يمكن تمريره. يعد استخدام Flutter لإنشاء رؤوس متجاوبة أمرًا بسيطًا ، كما أن استخدام رؤوس Flutter الثابتة لإنشاء المحتوى الخاص بك يبدو دائمًا رائعًا. الأدوات هي كتل صغيرة من المحتوى يمكن عرضها بعدة طرق وأماكن على موقع WordPress. تتضمن الأدوات المصغّرة الشائعة مربعات البحث ، وروابط الوسائط الاجتماعية ، والمنشورات الحديثة. يتمتع الزوار الذين يبقون على الموقع لفترة طويلة من الوقت بفرصة أكبر للاشتراك في رسالة إخبارية ، أو بيع المنتجات ، أو الإعلان. يمكنك إنشاء موقع ويب مذهل يجذب انتباه زوار موقعك ويبقيهم يعودون باتباع الخطوات الموضحة في هذه المقالة. إذا كان المظهر الخاص بك يتضمن سمات مدمجة ، فيمكنك إضافة مناطق عناصر واجهة مستخدم مخصصة بسهولة عن طريق تحديد خيارات السمة المضمنة. بالانتقال إلى المظهر ، يمكنك معرفة ما إذا كان المظهر الخاص بك يسمح لك بإنشاء / تحسين مناطق عناصر واجهة المستخدم. تشبه منطقة عنصر واجهة المستخدم المخصصة تلك الافتراضية ، ولكنها تحتوي على مجموعة الإعدادات وخيارات الحذف الخاصة بها. إذا كان لديك منشور مدونة واحد ، فيمكنك إنشاء منطقة عنصر واجهة مستخدم كشريط جانبي. يمكنك أيضًا تغيير موضعها وعرضها باستخدام خيار Sidebar Layout for Archive Pages. في هذا الدليل التفصيلي ، سنوضح لك كيفية إضافة مناطق عناصر واجهة المستخدم إلى موقع WordPress الخاص بك. من أجل استخدام كل منطقة عنصر واجهة مستخدم ، يجب أولاً تسجيلها مع وظيفة register_sidebar في ملف jobs.php الخاص بالقالب. قد يكون الترميز المخصص هو الخيار الأفضل إذا كان المظهر الخاص بك يفتقر إلى الخيارات الموضحة مسبقًا ، أو إذا كنت تريد المزيد من المرونة. مطلوب إضافة رمز إلى منطقة عنصر واجهة المستخدم بعد التسجيل لأشرطة جانبية محددة. بالانتقال إلى Appearance ، يمكنك تحديد عنصر واجهة المستخدم الذي تريد عرضه. لا تحتاج إلى التفاف الأداة بعلامة div لجعل HTML أكثر تنظيمًا ، ولكننا نوصي بها لتحسين بنية الصفحة. تتوفر بعض مناطق عناصر واجهة المستخدم في كل صفحة ، بينما يتوفر البعض الآخر في القليل فقط. لتحقيق نفس النتيجة لمناطق عناصر واجهة المستخدم التي تم إنشاؤها عبر التعليمات البرمجية ، استخدم العلامات والعبارات الشرطية. في هذا القسم ، سنتطرق إلى خطوات العلامات الشرطية باستخدام سمة Cevian ، بالإضافة إلى بعض الأمثلة. يعد استخدام الخطافات والفلاتر طريقة بسيطة ومريحة لإضافة وظائف مخصصة إلى قالبك. ستكون مهمة العثور على أفضل محدد CSS صعبة. نظرًا لأن كود منطقة عنصر واجهة المستخدم يجب أن يتم تغليفه في div محدد بفئة أو معرف مخصص ، فمن المستحسن أن يتم تغليفه بهذه الطريقة. يعد الشريط الجانبي مكونًا مهمًا في كل موقع WordPress لأنه يستخدم لتحسين تصميم الموقع وجذب الزوار. حتى إذا كانت منطقة عنصر واجهة المستخدم الافتراضية لموضوعك ملكك ، فإن إضافة منطقة عنصر واجهة مستخدم مخصصة يمكن أن تساعدك على التميز عن الآخرين. اتبع الخطوات والنصائح الموضحة في هذه المقالة لتهيئة منطقة عنصر واجهة مستخدم مخصصة على موقع الويب الخاص بك. لإضافة عنصر واجهة مستخدم إلى سمة WordPress الخاصة بك ، يمكنك استخدام أداة تخصيص السمات. انتقل إلى المظهر وحدد "تخصيص" من قائمة "الأدوات". يمكنك الآن تخصيص مناطق عناصر واجهة المستخدم من خلال الانتقال إلى صفحة تخصيص منطقة عنصر واجهة المستخدم. ما عليك سوى النقر فوق زر القائمة "الشريط الجانبي الأيمن" لإضافة عنصر واجهة مستخدم إلى الشريط الجانبي. سينقلك قسم المظهر إلى هذه الصفحة. سيتم عرض منطقة عناصر واجهة مستخدم جديدة بعنوان "منطقة أدوات رأس مخصصة" بعد تثبيتها. يمكنك الآن إضافة عناصر واجهة مستخدم إلى هذه المنطقة الجديدة بالنقر فوق هذا الارتباط. يتوفر المزيد من المعلومات حول كيفية إضافة عناصر واجهة مستخدم واستخدامها في WordPress في دليلنا. يمكنك إما استخدام لوحة إدارة WordPress لإضافة عنصر واجهة مستخدم إلى شريط جانبي أو استخدام مكون إضافي لإضافة عنصر واجهة مستخدم إلى شريط جانبي. إذا كنت ترغب في إضافة عنصر واجهة مستخدم إلى شريط جانبي برمجيًا ، فيمكنك استخدام وظيفة WordPress register_sidebar (). أحتاج لعرض عنصر واجهة المستخدم الخاص بي برمجيًا في قالب صفحة مخصص يعتمد على صفحة WP. تمت محاولة الدالة The_widget () ، لكنها لم تنجح. ومع ذلك ، لا أفهم كيفية تمرير المعلمات المسجلة في وظيفة register_sidebar على القطعة مباشرة إليها. كيف يمكنني فعل ذلك؟ قم بتسجيل الدخول إلى صفحة الأداة الخاصة بك ، وتأكد من أنها مرئية فقط على صفحة المنتج. يجب عليك وضع هذا في ملف function.php الخاص بك (بافتراض أن لديك بالفعل السطر الأول في ملف وظائفك). هذه هي الطريقة التي ستتم بها إضافة الكود في sidebar.php بحيث يمكن رؤية ما ورد أعلاه فقط في صفحة المنتج. بعد اختيار السمة ، انتقل إلى Theme Customizer وانقر فوق قائمة Widget. بدلا من ذلك ، ابحث عن المظهر. افتح الشريط الجانبي الذي تريد وضع الأداة فيه ، ثم انقر فوقه. قم بإنشاء قائمة بأنواع عناصر واجهة المستخدم من خلال البحث عنها. عندما يتم تحديد عنصر واجهة المستخدم ، يمكنك إضافة منطقة رأس مخصصة بالنقر فوق إضافة إلى مخصص. يمكن الآن العثور على عنصر واجهة المستخدم في منطقة رؤوس مخصصة. يحتوي عادةً على عنوان موقع الويب والشعار وقائمة التنقل. قد يحتوي العنوان أيضًا على مربع بحث وأيقونات وسائط اجتماعية وعناصر أخرى. نظرًا لأن WordPress عبارة عن نظام أساسي مفتوح المصدر ، يمكنك تحرير الموقع بنفسك. يصف الرأس المنطقة الموجودة أعلى الصفحة حيث يمكنك رؤية العناصر المرئية. يحتوي رأس صفحة WordPress على كل من رأس HTML للصفحة ورأسها. يرجى تضمين علامة البرنامج النصي هذه في تذييل WordPress الخاص بك. عند إنشاء رأس WordPress ، يجب أن نفرق بين إضافة رمز جديد إلى رأس HTML وتغيير مظهر الموقع. يمكن استخدام الطرق الثلاث التالية لتعديل رأس WordPress. يجب إضافة ملف header.php ، متبوعًا بتعديل رمز القالب ، وأخيرًا مكون إضافي. الهدف من هذه المقالة هو إرشادك خلال عملية إضافة كود إضافي باستخدام البرنامج المساعد Header and Footer Scripts. يقع رأس HTML بين علامتي الفتح والإغلاق في نص HTML. يتم تضمين خطافات WordPress ، مثل WP_head ، في هذه الوظيفة. يمكن أن يتضمن رأس HTML الآن عناصر أخرى إذا كان العنصر مرتبطًا. عندما يتعلق الأمر بأوراق الأنماط والنصوص ، فإن ترتيب العناصر مهم. إذا كنت ترغب في تحميل المزيد من البرامج النصية أو أوراق الأنماط ، فتأكد من تضمين مقتطف الشفرة مباشرةً في رأس WordPress. يتطلب الأمر درجة معينة من الحذر لأن الترتيب الذي يتم تحميل البرامج النصية به له تأثير كبير على تنفيذها. عند تغيير رمز قالب WordPress ، يجب عليك إنشاء قالب فرعي. ترث السمات التي تم إنشاؤها للأطفال رمز النسق الأصلي بالإضافة إلى إضافة المكونات بشكل انتقائي والكتابة فوقها. إذا كنت مطورًا أو تعمل مع المبرمجين ، فيمكنك إنشاء سمة فرعية. نظرًا لأن هذه الطريقة تسمح لمديري التسويق بإرساء رمز معين في رأس HTML دون الحاجة إلى مهارات تشفير احترافية ، فهي الطريقة المفضلة لديهم. علاوة على ذلك ، يمكن تحديث الإصدار الجديد دون تعديل القالب الأصلي. عندما يرى زوارك عنوان موقع الويب الخاص بك ، يجب أن يكون من السهل فهمه وجذابًا بصريًا. يمكن تخصيص رأسك وتصميمه لاستكمال شكل ومظهر موقع الويب الخاص بك في بضع خطوات بسيطة. علاوة على ذلك ، باستخدام أداة تخصيص WordPress ، يمكنك إعادة ترتيب العناوين على موقع الويب الخاص بك بحيث تظهر تمامًا كما تحدده. . من خلال إضافة عنصر واجهة مستخدم إلى قائمتك ، يمكنك بسهولة إضافة عنصر إضافي إلى موقعك دون الحاجة إلى تعديل theme.Widgets لا يمكن إضافتها إلى عنصر قائمة WordPress استنادًا إلى سلوك قائمة WordPress الافتراضي. يجب عليك استخدام مكون إضافي للقائمة الضخمة ، مثل QuadMenu ، لإكمال هذه المهمة. تأتي القوائم الضخمة بواجهة سحب وإفلات بسيطة للغاية ، مما يسمح لك بتضمين جميع عناصر واجهة المستخدم الخاصة بك بداخلها ، مثل قوائم علامات التبويب ، وقوائم الرف الدائري ، والقوائم الكبيرة. المظهر لإضافة عنصر واجهة مستخدم إلى عمود ، اضغط على زر علامة الجمع داخل العمود ، ثم حدد الأداة. إضافة قائمة تنقل في WordPress خيار آخر هو استخدام كتلة عنصر واجهة المستخدم "القائمة" ، والتي يمكن استخدامها لإضافة قائمة تنقل إلى مجال المحتوى الرئيسي. يمكنك إضافة العديد من العناصر كما تريد وكذلك تغيير العنوان والارتباط بالقائمة. بعد إضافة كتلة عنصر واجهة المستخدم ، ستحتاج إلى إضافة ملف القالب "nav_menu" إلى قالبك. يحتوي هذا الملف على قوائم HTML التي ينشئها WordPress. إنه موجود إما في مجلد النسق أو في مجلد / include / theme. بالذهاب إلى قائمة المظهر ، يمكنك إضافة عناصر القائمة إلى منطقة عناصر القائمة في موقعك. يمكن استخدام عنصر واجهة المستخدم "custom_menu" بالإضافة إلى عنصر واجهة المستخدم "custom_menu" لإنشاء قوائم مخصصة. باستخدام هذه الأداة ، يمكنك إنشاء قوائم مخصصة لمختلف مواقع الويب الخاصة بك على أساس كل موقع بدلاً من مشاركتها عبر الويب.