5 ملحقات جوجل كروم الأكثر فائدة لصانعي مواقع ووردبريس

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

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

جميع ملحقات Chrome الخمسة التي أستخدمها متاحة مجانًا ويمكنك تعيينها في بضع دقائق فقط. دعونا نلقي نظرة عليهم:

- WhatFont

- مسطرة الصفحة

- كولورزيلا

- لقطة شاشة رائعة

- Stylebot

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

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

دعنا نتعمق في تفاصيل كل امتداد.

WhatFont

احصل على ملحق WhatFont

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

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

يُظهر التوسيع الخصائص التالية للخط:

• وزن الخط ونمطه (يوضح وزن ونمط التحديد).

• عائلة الخط (تعرض المجموعة الكاملة من المحارف التي يأتي منها الخط ، حتى تتمكن من تعقبه).

• حجم الخط (هو حجم الخط المستخدم في دقة العرض الحالية. لاحظ أنه عند تعيين خطين مختلفين بنفس الحجم ، يبدو أحدهما أكبر من الآخر نظرًا لاختلافاته. يظهر الحجم بالبكسل وللأسف الامتداد ليس لديه قياسات مطبعية أخرى).

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

• لون الخط (نموذج لون HEX للخط. كن حذرًا عند قراءة لون نص الروابط. في بعض الحالات ، يُظهر التحديد لون الارتباط في وضع التمرير).

• روابط Google Fonts أو Font Squirrel أو TypeKit (في بعض الحالات ، يكون الخط متصلاً بمجموعة من واجهات برمجة التطبيقات التفاعلية ، والتي تتيح لك تصفح واستخدام خطوط الويب من موقع الويب الخاص بهم . ابحث عن نفس الخط أو احصل على محرف كامل) .
• الأحرف (يتم عرض عينة من الأحرف الكبيرة والصغيرة في الخط المحدد).

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

مسطرة الصفحة

احصل على ملحق مسطرة الصفحة

تتيح لك Page Ruler رسم مسطرة لأي صفحة وتعرض عرض العنصر وارتفاعه وموضعه على صفحة الويب. لن تضطر أبدًا إلى عرض الكود أو عمل لقطات شاشة وقياسها في Photoshop. الأداة مفيدة عند التحقق من حجم وموضع العناصر الأكبر على صفحة الويب. على سبيل المثال ، يمكنك التحقق من جميع الحشوات والهوامش معها. يمكن أيضًا قياس العناصر أو التفاصيل الأصغر.

كيفية استخدام مسطرة الصفحة

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

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

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

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

لقياس المسافة بين عنصرين متباعدين ، قم بتشغيل خيار "إظهار الأدلة" ، لعرض إرشادات تمتد من حواف المسطرة.

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

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

البحث عن العناصر والانتقال بينها في وضع العناصر

الجانب السلبي الوحيد للمكوِّن الإضافي: إذا كنت بحاجة إلى الحصول على حجم العنصر في عرض الجوال ، فسيتعين عليك استخدام Page Ruler في وقت واحد مع مكون إضافي آخر لتغيير حجم Chrome (مثل Window Resizer) ، لأن Page Ruler لا يعمل عندما تكون على صفحة الويب في وضع المطور.

كولورزيلا

احصل على ملحق ColorZilla

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

توفر هذه الأداة قراءات لونية بتنسيق RGB وتنسيق سداسي عشري. انقر فوق رمز قطارة ColorZilla يفتح قائمة بالعديد من الخيارات.

كيفية استخدام ColorZilla

الاستخدام الأكثر شيوعًا لـ ColorZilla ، هو قراءة لون العنصر. يتيح لك النقر فوق "اختيار لون من الصفحة" اختيار أي لون من الصفحة المعروضة حاليًا. يفتح شريط أدوات في الجزء العلوي من صفحة الويب ، والذي يعرض لك عينة من اللون وتنسيق الألوان RGB و HEX وحجم العنصر الملون ورمزه. يوفر شريط الأدوات أيضًا خيارات لتحديد تصحيحات أكبر من الألوان لحساب متوسط ​​اللون.

يمكنك تحديد ونسخ تنسيق HEX للون من خلال النقر عليه. الصق رمز لون HEX بالأزرار CTRL + V أو CMD + V. للنسخ مرة واحدة بتنسيق مختلف ، يمكنك فتح القائمة المنسدلة ، وتحديد "نسخ إلى الحافظة" واختيار التنسيق المطلوب.

يمكن تغيير التنسيق لجميع الألوان المختارة التالية في الخيارات. هناك يمكنك تعطيل تنسيق # (66CAA6) وإنشاء كود HEX بأحرف صغيرة (66caa6). لا تنس حفظ التغييرات.

يتم حفظ آخر لون اخترته في القائمة المنسدلة لأيقونة ColorZilla ، ضمن "Color Picker". يقوم Color Picker بتخزين محفوظات الألوان المختارة ، ولديه خيار لتحرير اللون ويمكنك نسخه من هنا.

يقرأ "محلل ألوان صفحة الويب" جميع ألوان CSS المستخدمة في صفحة الويب الحالية. يؤدي النقر فوق اللون إلى إبراز كل عنصر في هذا اللون وإظهار تنسيق RGB و HEX للون.

يسمح لك متصفح اللوحة المدمج باختيار الألوان من مجموعات الألوان الموجودة مسبقًا. أحد الخيارات المتعلقة بالألوان هو أيضًا "CSS Gradient Generator" ، وهو خيار متقدم لإنشاء التدرجات.

لقطة شاشة رائعة

احصل على ملحق لقطة شاشة رائع

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

كيفية استخدام لقطة شاشة رائعة

يتيح لك هذا التوسيع:

- لالتقاط جزء مرئي من صفحة الويب (خيار التسمية التوضيحية المتأخرة) ،

- لالتقاط المنطقة المحددة (حدد المنطقة التي تريدها كصورة) ،

- لالتقاط صفحة ويب كاملة ،

- لالتقاط لقطة شاشة لسطح المكتب ،

- لاستيراد وتحرير صورتك المحلية و

- لتسجيل فيديو على الشاشة.

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

إذا كنت تريد عرض الجوال لصفحة الويب أو لعمل لقطة شاشة لصفحة الويب الخاصة بك على WordPress بدقة أخرى ، فيمكنك الانتقال إلى وضع المطور لتعديلها أو تنشيط أي توسيع آخر لتغيير الحجم أولاً (مثل Website Resizer).

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

خيارات تحرير شريط الأدوات ولقطة الشاشة باستخدام لقطة شاشة رائعة

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

يحتوي هذا التوسيع أيضًا على خيار لتسجيل فيديو مدته 30 ثانية على الشاشة مجانًا. يمكنك عمل علامة تبويب أو نافذة فيديو. يمكن حفظ مقاطع الفيديو بتنسيق WebM أو نقلها إلى Google Drive أو تحميلها مباشرة على YouTube. يمكن العثور على تسجيلاتك في القائمة المنسدلة Awesome Screenshot ضمن "تسجيلاتي".

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

حقيقة تافهة ممتعة: تم إنشاء معظم لقطات الشاشة ومقاطع الفيديو التي تشاهدها في هذه المقالة باستخدام لقطة شاشة رائعة.

Stylebot

احصل على ملحق Stylebot

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

لمزيد من التحرير المتقدم ، يتم استخدام Stylebot مع وضع المطور لتحديد العناصر على الصفحة.

كيفية استخدام Stylebot

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

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

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

هنا يمكنك التغيير:

- نص،

- الألوان والخلفيات

- الحدود

- التخطيط والرؤية.

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

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

إذن ، يوجد هنا 5 فقط ، أهم الإضافات والأكثر قوة ، والتي نستخدمها يوميًا في ProteusThemes ويمكن أن تجعل سير عملك أسهل أيضًا. هل تعتقد خلاف ذلك؟ هل تنصح بدائل أفضل؟ اترك تعليقا.