المدونة

From the word itself, the word shortcode means exactly that: A short code; a shortcut code.

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

على سبيل المثال، قد يبدو جزء عادي من التعليمات البرمجية، من حيث الطول، شيئاً كهذا:

<html>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam id aliquam turpis. Vivamus quis arcu tincidunt, finibus urna eget, placerat risus.

Aliquam arcu massa, finibus et lacinia sed, scelerisque nec augue. Quisque eu viverra sapien, vel consequat lorem. Integer vel erat tortor.

Phasellus condimentum magna eget congue venenatis. Suspendisse blandit vehicula consectetur.

Nullam sodales eleifend massa, in bibendum purus fermentum id.

Morbi et turpis feugiat, malesuada ipsum sit amet, interdum nulla. In non ante nec nisl mattis gravida sit amet id lectus.

</html>​

لهذا المثال، دعنا نفترض أن جزء التعليمات البرمجية أعلاه سيتيح لك إضافة فقرة كاملة من نص Lorem Ipsum النائب.

Now, a shortcode with the same exact function as the code above will look something like this, in contrast:

[lorem ipsum dolor estat]Lorem Ipsum[/lorem]​

You can see how they’re miles different from each other in terms of length.

الآن تخيل أن كلا الجزأين البرمجيين – الجزء الأصلي الطويل، مقابل الرمز القصير الذي يحتوي فقط على كلمة “lorem”، سيؤديان نفس الغرض تماماً: إضافة نص Lorem Ipsum.

This is what shortcodes do. They make adding widgets, functions, and a bunch of other cool stuff easier for both ordinary WordPress users and developers alike.

Where can I find shortcodes?

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

Shortcodes Ultimate, for example, will let you choose from hundreds of shortcodes that you can use on Page Builder Sandwich (or anywhere, actually) by simply grabbing the shortcode of your choice from Shortcode Ultimate’s repository or documentation page.

Adding Custom Shortcodes on PBS

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

لقد فعلنا ذلك أدناه باستخدام رمز قصير من Shortcodes Ultimate، حيث أضفنا مربع محتوى على الصفحة التجريبية لـ Page Builder Sandwich:

Another thing you’ll find handy when using Page Builder Sandwich is our Shortcode Mapping feature.

من إحدى مقالاتنا السابقة حول تخطيط الرموز القصيرة (Shortcode Mapping)، التعريف هو كما يلي:

Shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

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

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

So for example, if I wanted to add a WooCommerce shortcode on my page, all I have to do is make sure that it’s installed on my WordPress site, like so:

And then, to actually add the shortcode, I’ll just go to my page, and drag and drop the Shortcode Element:

Because we already have WooCommerce installed on our WordPress site, you can see that all of the shortcodes that are available on the WooCommerce plugin are already available on Page Builder Sandwich. This is what Shortcode Mapping is.

You can also see on the upper left corner that the ACF (Advanced Custom Fields) and MailChimp shortcodes are available– because we have those instlled on our WordPress site, too.

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

Here are some other helpful plugins that you can use to create your own custom shortcodes:

هناك العشرات بل المئات من أدوات إنشاء الصفحات المتوفرة، ولابد أنك تسأل نفسك: ما الذي يميز Page Builder Sandwich إلى هذا الحد؟ لماذا قد تكلف نفسك عناء استخدامه إذا كان لديك واحد بالفعل بين يديك؟

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

1. لن ترى مجرد تمثيل مرئي لمحتواك، بل سترى محتواك الفعلي وتعدله

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

مع Page Builder Sandwich، يتم إجراء كل عمليات التحرير في الواجهة الأمامية لموقعك وتقوم بتعديل محتواك مباشرة للحصول على تجربة حقيقية تعتمد على مبدأ «ما تراه هو ما تحصل عليه».

2. تحرير مباشر سريع وسهل دون كل تلك النوافذ المنبثقة المزعجة

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

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

يتم التحرير بطريقة مباشرة وبسيطة – انقر على النص لوضع المؤشر هناك وابدأ في الكتابة فوراً. لن تضطر بعد الآن إلى انتظار نافذة منبثقة تحتوي على محرر TinyMCE لبدء التحرير. وأفضل ما في الأمر هو أنه لا يزال بإمكانك سحب المحتوى وإفلاته في أي مكان.

ابتكار آخر يساعد في تحرير خالٍ من المتاعب هو لوحة الفحص المتواجدة دائماً. تعمل لوحة الفحص كصندوق أدوات ومحرر للخصائص. أدوات لتنسيق محتواك: ألوان النصوص، العناوين، تعديلات حجم الخط، الهوامش الخارجية، الهوامش الداخلية، الحدود، الاقتباسات، وغيرها الكثير، كلها على بُعد نقرة سهلة.

3. إعادة استخدام وظائف ووردبريس

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

ووردبريس منصة ضخمة ورائعة وتحتوي على الكثير من الأدوات المميزة التي بناها عدد لا يحصى من المساهمين الرائعين. ويستخدم Page Builder Sandwich الوظائف المدمجة بالفعل في ووردبريس قدر الإمكان.

بدلاً من استخدام أداة انتقاء ألوان خاصة بنا، نستخدم أداة Iris لاختيار الألوان. وبدلاً من أداة رفع صور خاصة بنا، نستخدم مدير الوسائط. وهناك أيضاً backbonejs وunderscorejs وwp.hooks وwp.shortcode على سبيل المثال لا الحصر من النصوص البرمجية الذكية. نحن نستخدم كل هذه الأدوات، مما جعل حياتنا أسهل وأدى أيضاً إلى قاعدة برمجية أكثر استقراراً.

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

4. التنقل عبر لوحة المفاتيح والاختصارات

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

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

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

5. أداة حقيقية لإنشاء الصفحات في الواجهة الأمامية – تجربة تحرير أكثر راحة وخالية من المتاعب

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

خلاصة القول، بالنسبة لي، فإن العامل المميز الرئيسي لـ Page Builder Sandwich هو أننا قمنا ببنائه بهدف أن يكون أداة «حقيقية» لإنشاء الصفحات في الواجهة الأمامية – وإعادة تصور لما ينبغي أن يكون عليه التحرير في الواجهة الأمامية.