كيفية استخدام AMP مع وورد
AMP هي الجهود الجماعية التي وعدت أ أداء أفضل لتحميل الصفحات لمواقع الويب في بيئة الجوّال. ولكن ، كما يمكنك أن تجد من خلال البرنامج التعليمي السابق الخاص بنا ، سيكون عليك التضحية بالأشياء الفاخرة من موقع الويب الخاص بك ، واتباع القواعد بدقة ، والامتثال للإرشادات ، والتحقق من صحة الصفحات. يبدو الكثير للقيام به ، أليس كذلك?
لحسن الحظ ، إذا كنت قد أنشأت موقع الويب الخاص بك باستخدام WordPress ، فيمكنك تطبيق AMP على موقع الويب الخاص بك في لمح البصر باستخدام مكون إضافي يسمى AMP-WP. يتم شحنها مع المزيد من الميزات أكثر مما تراه العين. لذلك ، دعونا نرى كيف يعمل.
تفعيل
لتبدأ ، تسجيل الدخول إلى موقع الويب الخاص بك ، انتقل إلى الإضافات> إضافة جديد شاشة. البحث عن “AMP. تثبيت وتفعيل واحد من Automattic.
بمجرد تنشيطه ، يمكنك عرض المنشور المحول من AMP عن طريق إضافة / أمبير / درب في نهاية عنوان URL المنشور (على سبيل المثال. http://wp.com/post/amp/)، أو مع ?أمبير = 1 (على سبيل المثال. http://wp.com/post/؟amp=1) إذا كنت لا تستخدم ميزة Pretal Permalinks على موقع الويب الخاص بك.
وكما ترون أعلاه ، تم منح المنشور نقوشًا أساسية ، يمكنك تخصيصها أكثر.
للملاحظه
هناك بعض الأشياء التي يجب أن تعرفها عن حالة المكون الإضافي في الوقت الحالي:
- أرشيف - الفئة, بطاقة و تصنيف مخصص - غير مدعوم حاليًا. لن يتم تحويلها إلى تنسيق متوافق مع AMP. ومع ذلك ، يمكن بدء أنواع المنشورات المخصصة في AMP من خلال مرشح.
- لا تضيف في شاشة إعداد جديدة في Dashboard. يتم التخصيص على مستوى الرمز مع الإجراءات ، المرشحات ، الدرجة.
- لا يشمل البرنامج المساعد حاليًا كل عناصر AMP المخصصة مثل
أمبير-تحليلاتوأمبير من الاعلاناتخارج الصندوق. إذا كنت بحاجة إلى هذه العناصر ، فسيتعين عليك تضمينها من خلال ربط إجراءات أو مرشحات البرنامج المساعد.
التخصيص
يوفر المكون الإضافي العديد من الإجراءات والفلاتر التي توفر المرونة في تخصيص الأنماط ومحتوى الصفحة وحتى علامة HTML لصفحة AMP ككل.
الأنماط
أنا متأكد من أن هذا شيء واحد تريد تغييره فورًا بعد تنشيط المكون الإضافي ، مثل تغيير لون خلفية الرأس وعائلة الخط وحجم الخط لتتوافق بشكل أفضل مع العلامة التجارية لموقعك وشخصيته.
للقيام بذلك ، يمكننا توظيف amp_post_template_css العمل في functions.php ملف موضوعنا.
function theme_amp_custom_styles () ؟> nav.amp-wp-title-bar background-color: orange؛إذا نظرنا إلى Chrome DevTools ، فسيتم إلحاق هذه الأنماط داخل