فهم أكواد WordPress المختصرة

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

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

[example shortcode]

بمعنى آخر: تتسبب الرموز القصيرة في حدوث شيء مميز أينما وُضِعت في النص الخاص بك.
لكنك لا تقتصر على الرموز القصيرة المحددة مسبقًا ؛ يمكنك تحديد رموز مختصرة مخصصة لتفعل ما تريد! يمكن أن تكون بسيطة أو معقدة أو أي شيء بينهما.

في هذه السلسلة ، سنبدأ برمز قصير بسيط ، ونعمل في طريقنا للوصول إلى بعض الأمثلة الأكثر تعقيدًا (والأكثر إفادة!).

ملاحظة: سنعمل بشكل أساسي مع PHP هنا ، وتحديداً في ملف function.php الخاص بالقالب الخاص بك. إذا كنت لا تستخدم قالبًا فرعيًا (أو سمة مخصصة / بادئًا لا بأس من تعديلها دون الخوف من أن تحل التحديثات محل تغييراتك) ، فستحتاج إلى إنشاء سمة فرعية قبل البدء.

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

مثال بسيط ومفيد للرمز القصير

لنفترض أننا نريد رمزًا قصيرًا يضخ قسمًا خاصًا لمعلومات المؤلف في منشور ، مثل هذا:

بدلاً من إنشاء المربع والصورة والنص وتصميمهما في محرر WordPress المرئي ، سنقوم فقط بإنشاء رمز قصير لإخراج كل شيء باستخدام مقتطف بسيط!

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

الخطوة 1: أضف الكود القصير في ملف jobs.php الخاص بالقالب

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

 [php]add_shortcode( 'author_bio', 'create_author_bio' );[/php]

لا يهم حقًا أين يوجد داخل functions.php ، ولكن لتجنب التعارضات ، نوصي بوضعه في النهاية. (إذا انتهى الملف بعلامة إغلاق؟

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

1. الوسيطة الأولى: في هذه الحالة ، author_bio - تخبر WordPress بالاسم الفعلي للرمز المختصر الخاص بك. سيكون هذا هو النص الذي يمكن للمستخدمين كتابته ، بين قوسين ، لاستخدام الرمز القصير. لذلك مع هذا الكود كما هو مكتوب ، سيكون [author_bio] هو رمزنا المختصر لتشغيل مربع السيرة الذاتية للمؤلف.
   يمكن أن يكون هذا النص أي شيء ، ولكن من الأفضل دائمًا أن تحاول أن تكون فريدًا. بهذه الطريقة ، لن تتعرض لخطر تعارض اسم الرمز القصير الخاص بك مع اسم شخص آخر من مكون إضافي أو سمة أخرى مثبتة.
2. المعامل الثاني: في هذه الحالة ، create_author_bio - يشير WordPress إلى وظيفة PHP الفعلية التي يجب أن ينفذها كلما تم استخدام هذا الرمز القصير. سننشئ هذه الوظيفة في الخطوة التالية ؛ في الوقت الحالي ، نسمح لـ WordPress فقط بمعرفة ما سيكون اسمه. (يجب أن يكون هذا الاسم فريدًا أيضًا لتجنب التعارضات.)

لذلك إذا كان ذلك مفيدًا ، فيمكنك التفكير في الكود على النحو التالي:

 [php]add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );[/php]

إذا كنت مهتمًا بمزيد من التفاصيل الدقيقة ، فتحقق من إدخال add_shortcode Codex.

الخطوة 2: قم بإنشاء وظيفة للتعامل مع الرمز القصير

الآن نحن بحاجة بالفعل إلى إنشاء الوظيفة التي أطلقنا عليها للتو!

نظرًا لأننا أخبرنا للتو WordPress في الخطوة الأخيرة أن اسم وظيفتنا هو create_author_bio ، يجب أن يبدو الكود الخاص بنا الآن بهذا الشكل ، بمجرد إضافة الوظيفة الجديدة:

 [php]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ //Code goes here! }[/php]

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

ملاحظة جانبية: لا يهم ما إذا كانت وظيفة create_author_bio تأتي بعد وظيفة add_shortcode أو قبلها. الترتيب ليس مهمًا في هذه الحالة.

الخطوة 3: اجعل الوظيفة تفعل شيئًا ما

الآن كل ما تبقى هو جعل وظيفتنا تفعل ما نريد!

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

لأغراضنا ، سيكون هذا مجرد بعض HTML بسيط. إليك الترميز لإضافة صورة المؤلف والسيرة الذاتية داخل عنصر <aside> مع فئة مخصصة (لكن لا تضع هذا في أي مكان بعد ؛ فنحن ننظر إليه فقط كمعاينة في الوقت الحالي):

 [html]<aside class="author-bio-box"></span> <img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"> <p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p> <p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p> </aside>[/html]

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

الآن ، كل ما نحتاج إلى القيام به هو أن تقوم وظيفة الرمز المختصر الخاص بنا بإرجاع HTML أعلاه!

نظرًا لأن ملف functions.php يجب أن يحتوي فقط على ... حسنًا ، وظائف PHP (وأيضًا للتنظيف) ، فقد أزلنا فواصل الأسطر والمسافات بين عناصر HTML التي نظرنا إليها للتو ووضعناها في سلسلة (داخل علامات الاقتباس المفردة) . لكن وظيفيًا ، لا يزال هو نفس مقتطف HTML الذي رأيناه للتو أعلاه ، وهذا هو الشكل الذي يجب أن تبدو عليه شفرة PHP النهائية:

 [html]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ return '<aside class="author-bio-box"><img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"><p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p><p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p></aside>'; }[/html]

انتهينا من PHP! بمجرد قيامنا بحفظ ملف functions.php الخاص بنا مع الكود النهائي أعلاه فيه ، يمكن لأي مؤلف ببساطة إدخال [author_bio] في أي صفحة أو منشور ، وسيظهر HTML أعلاه في مكان الرمز المختصر!

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

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

الخطوة 4: أضف بعض CSS

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

يمكن نسخ CSS هذا إلى ملف style.css لموضوعك (الطفل) ، أو إذا كنت تقوم بتشغيل WordPress 4.7 أو أعلى (وهو ما يجب أن تكون عليه!) ، يمكنك فقط لصق CSS هذا في مربع "CSS إضافي" في تخصيص شاشة:

 [css].author-bio-box { background: #d4ead9; padding: 2em; overflow: auto; font-family: Fanwood Text; font-size: 1.2em; line-height: 1.4em; } .author-bio-box img { float: left; max-width: 128px; height: auto; margin: 0 1em 0 0; } .author-bio-box > p:first-of-type:first-letter { font-size: 3.1em; line-height: 1; float: left; margin-bottom: -.2em; } .author-bio-box > p:last-of-type { margin: 0; }[/css]

الآن يجب أن تبدو الأمور أفضل بكثير. لكن لا تتردد في اللعب باستخدام CSS لجعل مربع المؤلف خاصًا بك وتجعله يشعر وكأنك في منزلك على موقعك!

موصى به: اجعل الوظيفة "قابلة للتوصيل"

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

أولاً ، خلفية بسيطة عن كيفية عمل PHP :

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

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

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

هذا سيء ، ومن الواضح أننا نريد التأكد من عدم حدوث ذلك أبدًا.

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

 [php]if( !function_exists( 'create_author_bio' ) ){ //Our existing PHP goes here! }[/php]

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

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

خاتمة

هذا كل شيء! آمل أن تكون قد استمتعت بإنشاء رمز قصير مخصص للمؤلف! إذا تابعت ذلك ، فكل ما عليك فعله هو كتابة [author_bio] في أي مكان في الصفحة أو المنشور وسيظهر الرمز الخاص بك!

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

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

أخبار سارة: لقد قمنا بتغطية أساسيات الرموز القصيرة فقط ، وهي قادرة على القيام بأكثر من ذلك بكثير!