تحتاج إلى رؤية جميع التغييرات على الموقع نفسه بسرعة، دون التأثير على ملفات ورمز الموقع المنشور على الإنترنت. على سبيل المثال، تغيير نظام الألوان للكتلة، أو نقل عنصر تم نقله للخارج، وما إلى ذلك.
للقيام بذلك، يستخدم العديد من مشرفي المواقع خوادم Denwer أو OpenServer المحلية، ويقومون بتشغيل نسخة كاملة من الموقع على أجهزة الكمبيوتر الخاصة بهم. هذه الطريقة عالمية ومناسبة للمحترفين، ويمكن استخدامها لاختبار عمل البرامج النصية والمكونات الإضافية المختلفة، وتجربة تغيير التصميم وتحرير جميع ملفات الموقع، وبعد الاختبار، نقل التغييرات المناسبة مباشرة إلى الموقع.
بالنسبة للمستخدمين البعيدين عن فن مشرفي المواقع، أوصي باستخدام متصفح لهذه الأغراض. وبما أنني أستخدم Chrome، فسوف أقدم تعليمات مع لقطات شاشة لهذا المتصفح تحديدًا. وقياسًا على ذلك، يمكنك العمل مع متصفحات Opera وYandex.Browser وMozilla Firefox ومتصفحات أخرى؛
افتح صفحة الويب المطلوبة لموقعك. انقر بزر الماوس الأيمن على العنصر المطلوب، وستظهر قائمة منسدلة سياقية للمتصفح تحتوي على الأوامر المتاحة:
الشكل 1. عرض كود HTML بالكامل لصفحة الويب في متصفح Chrome
مهم:قد تختلف الأوامر الموجودة في القائمة المنسدلة، على سبيل المثال، بالنسبة للعناصر النشطة (الروابط والصور ومقاطع الفيديو) والعناصر غير النشطة (النص والخلفية وdivs):
الشكل 2. القائمة المنسدلة لمتصفح Chrome
لذا، إذا لم تجد الأمر الذي تحتاجه، فما عليك سوى النقر بزر الماوس الأيمن في مكان آخر أو استخدام مفاتيح التشغيل السريع للمتصفح الخاص بك.
دعنا نعود إلى الشكل 1، فهو يوضح الأمر الضروري لعرض كافة أكواد HTML الخاصة بصفحة الويب المصدر، ويسمى " عرض رمز الصفحة". انقر فوق الأمر، سيتم فتح علامة تبويب جديدة تحتوي على الكود الكامل لصفحة الويب المصدر، وهي إضافة كبيرة لكل شيء - العرض متاح مع تمييز بناء الجملة:
الشكل 3. جزء من التعليمات البرمجية لهذا الموقع
هذه الأداة مفيدة جدًا للعثور على العناصر التي تبحث عنها وتحريرها.
للوصول بشكل أسرع، يمكنك استخدام طرق أخرى لاستدعاء هذه الأداة
كلتا الطريقتين عالميتان ويجب أن تعملا في جميع المتصفحات.
في البداية، قد يعتقد البعض أن هذه ليست أداة ضرورية على الإطلاق، ولكن عرض كود HTML بالكامل لموقع ما يعد أمرًا رائعًا للعثور على العناصر الضرورية في الكود، يمكن أن تكون هذه روابط وعلامات وعلامات وصفية وسمات وعناصر أخرى .
مجموعة مفاتيح التشغيل السريع
الشكل 3. البحث عن طريق رمز الموقع
بعد إدخال طلب في نموذج البحث، ستنتقل الشاشة إلى العنصر الأول الذي تم العثور عليه، باستخدام الأسهم يمكنك التنقل بينها واختيار العنصر الذي تحتاجه:
الشكل 4. البحث عن طريق كود موقع HTML
الآن الجزء الأكثر أهمية، والذي سأوضح فيه كيف يمكنك تحرير كود HTML وCSS لموقع ويب في المتصفح. ثم انقل التغييرات إلى المتصفح
تتوفر هذه الأداة المفيدة دائمًا في متصفحك، ويمكنك تجربة أوامر أخرى ستسهل عليك تعديل موقعك.
من خلال البحث في عدد لا يحصى من المواقع على الإنترنت، يمكنك العثور على المواقع التي نحبها حقًا. هناك عدد من الأسئلة تنشأ على الفور. هل تم إنشاء الموقع باستخدام كود محلي الصنع أو نوع من نظام إدارة المحتوى (CMS)؟ ما هي أنماط CSS الموجودة به؟ ما هي العلامات الوصفية الخاصة به؟ وما إلى ذلك وهلم جرا.
هناك العديد من الأدوات التي يمكن استخدامها لاستخراج معلومات حول كود صفحة موقع الويب. ولكن لدينا دائمًا زر الفأرة الأيمن في متناول اليد. وهذا ما سنستخدمه، باستخدام موقعي كمثال.
لعرض الكود المصدري لصفحة الموقع، تحتاج إلى تحريك مؤشر الماوس فوق أي منطقة من صفحة الويب (باستثناء الصور والروابط). بعد ذلك قم بالضغط على زر الفأرة الأيمن. ستفتح أمامنا نافذة تحتوي على عدة خيارات (قد تختلف قليلاً في المتصفحات المختلفة). في متصفح Google Chrome، على سبيل المثال، هذه هي الأوامر:
نحن بحاجة للنقر على عرض رمز الصفحةوسيفتح أمامنا كود html الخاص بصفحة الموقع.
لذا فإن رمز صفحة Html عبارة عن قائمة مرقمة من الأسطر، يحمل كل منها معلومات حول كيفية إنشاء هذا الموقع. لكي تتعلم بسرعة فهم هذا العدد الهائل من العلامات والرموز الخاصة، عليك التمييز بين الأقسام المختلفة من الكود.
على سبيل المثال، تحتوي أسطر التعليمات البرمجية داخل علامة الرأس على معلومات لمحركات البحث ومشرفي المواقع. لا يتم عرضها على الموقع. هنا يمكنك معرفة الكلمات الرئيسية التي يتم الترويج لها لهذه الصفحة، وكيفية كتابة عنوانها ووصفها. هنا أيضًا يمكنك العثور على رابط سنتعرف من خلاله على عائلة خطوط Google المستخدمة في الموقع.
إذا تم إنشاء الموقع على CMS WordPress أو Joomla، فسيكون هذا مرئيًا هنا أيضًا. على سبيل المثال، تعرض هذه المنطقة معلومات حول قالب WordPress أو قالب موقع Joomla. يمكنك رؤيته من خلال قراءة محتويات الروابط المميزة باللون الأزرق. يظهر رابط واحد قالب موقع ويب.
على سبيل المثال:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
سنرى أنماط خطوط CSS للصفحة. في هذه الحالة، يتم استخدام الخط. يمكن رؤية ذلك هنا - عائلة الخطوط: "Source Sans Pro".
تم تحسين هذا الموقع باستخدام البرنامج المساعد Yoast SEO. يمكن ملاحظة ذلك من قسم التعليمات البرمجية الذي تم التعليق عليه:
تم تحسين هذا الموقع باستخدام الإصدار 3.4.2 من Yoast SEO الإضافي - https://yoast.com/wordpress/plugins/seo/
يتم عرض جميع المعلومات الموجودة داخل علامة الجسم بواسطة المتصفح على شاشة المراقبة. نرى هنا رمز HTML للصفحة، وفي الأسفل يوجد رمز البرنامج النصي Yandex Metrics. وهي محاطة بعلامة تعليق تحتوي على النص:
/ عداد Yandex.Metrika
بعد إجراء تحليل سطحي إلى حد ما لرمز الصفحة الرئيسية للموقع، يمكننا استخلاص استنتاج حول الأدوات التي تم إنشاء هذه الصفحة بها. رأينا فيه:
أصبح الآن مبدأ تحليل كود html لصفحة موقع الويب واضحًا تمامًا. ليس من الضروري على الإطلاق إبقاء الصفحة التي تبحث عنها مفتوحة في المتصفح. يمكنك حفظ رمز الصفحة على جهاز الكمبيوتر الخاص بك باستخدام مجموعات المفاتيح ctrl+a، ctrl+c، ctrl+v. الصقه في أي محرر نصوص (يفضل Notepad++) واحفظه بامتداد html. وبالتالي، يمكنك في أي وقت دراستها بشكل أعمق والعثور على المزيد من المعلومات المفيدة لنفسك.
كل مستخدم للإنترنت لديه مواقعه المفضلة التي يقضي فيها وقتًا طويلاً. والكسالى فقط هم الذين لم يفكروا في النظر إلى كيفية خلقها ومما تتكون. من المستحيل الإجابة على كل هذه الأسئلة، حيث أن هناك العديد من الطرق لإنشاء موقع على شبكة الإنترنت، ولكن النظر إلى الأوامر والأكواد التي يتكون منها هذا الموقع أمر ممكن ومتاح للجميع.
سؤال آخر هو ما إذا كان الشخص الذي لا يشارك في البرمجة سيفهم أيًا من الرموز التي يتكون منها الكود. ولكن من الأمثلة التي سيتم تقديمها أدناه، سيتمكن أي مستخدم Google Chrome من عرض العناصر الفردية للمواقع.
لكي تتمكن من عرض رمز الصفحة في كروم، عليك الذهاب إلى الموقع الذي تهتم به وتنفيذ الخطوات التالية:
ويختلف هذان العنصران في وظائفهما ومعلوماتهما بالنسبة للمستخدم أو المبرمج أو المتسلل.
تحليل كل من هذه الوظائف، يمكنك كتابة مقال منفصل. بالنسبة للمبرمجين، يعد هذا الاختلاف مهمًا ويفهمون في أي الحالات يكون من الضروري استخدام "عرض الرمز" وفي أي الحالات يكون من الضروري استخدام "عرض رمز الصفحة" في متصفح Google Chrome.
ولكن للتوضيح للمستخدم العادي، يمكن تقسيم هذه الوظائف إلى الأغراض التالية:
إذا أردنا الإجابة على مثل هذا السؤال، فإن الخيار الوحيد الذي يقترح نفسه هو المثال. لأنه في مقال واحد من الصعب جدًا أن تصبح شخصًا يفهم هذا الموضوع (مطور الويب)، ولكن الإظهار بمثال حتى تتم تسوية السؤال أسهل بكثير.
وظيفة رمز العنصر واسعة جدًا، لذلك نأخذ إحدى الكلمات الموجودة على موقع متصفح Google Chrome. أردنا أن نأخذ في الاعتبار الكلمات الرئيسية (التي سيتم كتابتها في الكود باسم "الكلمات الرئيسية") التي تم استخدامها لموقعنا. للقيام بذلك، نقوم بتنفيذ الخوارزمية التالية:
بشكل عام، الاستمرار في الإجابة على سؤال حول كيفية النظر إلى رمز العنصر وسبب الحاجة إليه، يجب عليك سرد وظائفه. وبالتحديد، بفضل القدرة على عرض كود عنصر أي موقع في متصفح Google Chrome، يمكننا:
هذه ليست بأي حال من الأحوال قائمة محدودة. ولكن تجدر الإشارة إلى أنه بدون معرفة خاصة، يكاد يكون من المستحيل "قراءة" رمز صفحة Google Chrome وأن البيانات المستلمة ليست مطلوبة عمليًا من قبل المستخدم العادي.
يجب أن يقال على الفور أن كل موقع سيكون له وصول مفتوح إلى رموز العناصر. وهذا يعني أنه حتى المواقع الأكثر شعبية والأكثر تكلفة ستكون مفتوحة لعرض التعليمات البرمجية الخاصة بها. ولذلك، إذا كان العنصر الموجود في متصفح Google Chrome غير نشط أو أدى إلى ظهور خطأ، فقد يكون له الأسباب المحتملة التالية:
لإنشاء ملف تعريف جديد، يجب عليك حذف الملف القديم من جهاز الكمبيوتر الخاص بك. وللقيام بذلك نقوم بما يلي:
إذا كان الملف الشخصي الجديد لا يتيح لنا الوصول إلى رمز عنصر الصفحة وما زلنا نرى الخطأ، فيجب علينا القيام بما يلي:
إذا تم كل شيء بشكل صحيح، فبعد إعادة تشغيل الكمبيوتر، سيفتح Google Chrome رمز العناصر وسيعمل المتصفح بشكل طبيعي.
تعد خدمة SendPulse أداة تسويقية لإنشاء قاعدة اشتراكات وتحويل الزوار العاديين إلى موقع الويب الخاص بك إلى زوار عاديين. يجمع SendPulse في منصة واحدة أهم الوظائف لجذب العملاء والاحتفاظ بهم:
● النشرات الإخبارية عبر البريد الإلكتروني،
● دفع الويب،
● رسائل الرسائل القصيرة،
● سمتب،
● الرسائل الإخبارية في فايبر،
● إرسال الرسائل إلى الفيسبوك رسول.
حجم ولون بعض العناصر المهمة في المدونة – مثل عنوان المدونة أو المنشور، وعلامة المزيد، وما شابه ذلك. لقد بحثت عن الكود المطلوب يدويًا، وقمت بتجربة مجال الاختبار، والذي تم على أساسه كتابة المقالة لاحقًا.
ومؤخرًا كنت بحاجة إلى تغيير لون الروابط. من خلال غربلة مجموعة من الأدبيات حول هذه المشكلة، أدركت شيئًا بسيطًا: يقدم الجميع أمثلة من قوالبهم الخاصة، ولكن لدينا جميعًا قوالب مختلفة ومن الجيد أن يكون الكود من المثال متشابهًا إلى حد ما على الأقل: دون أنين، سأظل أجده من خلال البحث - باستخدام طريقة النخزة.
الرقم لا يعمل مع رمز الرابط. أشار الجميع إلى مسارات مختلفة تمامًا. تساءلت عما إذا كانت هناك أداة بسيطة ودقيقة، كيفية العثور على كود html المطلوب على أي موقع ويب.يواجه العديد من المدونين، حتى ذوي الخبرة، صعوبة في إجراء تعديلات طفيفة على القالب. لا حرج في ذلك، لأن كل شخص لديه اهتماماته وأهدافه الخاصة لإنشاء موقع على شبكة الإنترنت.
إذا كنت تريد إجراء تغييرات صغيرة على القالب، على سبيل المثال. تغيير أي عنوان، عنوان المقالات والأقسام، لون وحجم الخطوط والروابط،عادةً ما يكفي تعلم المبدأ البسيط الذي تمت مناقشته في هذه المقالة. ولكن هناك أيضًا حالات معقدة تتطلب إما دراسة أعمق لـ html و css أو مساعدة أحد المتخصصين.
في أحد الأيام، طلب مني أحد معارفي العثور على مكان لتغيير لون لوحة الفئة في القالب الخاص به. تم تحميل سمة إلى نطاق فرعي للاختبار. لم يتم تخزين إعدادات هذا العنصر في style.css، ولكن في ملف آخر، لذلك لم يتمكن الشخص من العثور عليه.
إذا كنت لا تحب المقالات الطويلة، فهذا لك في نهاية المقالفيديو تعليمي يوضح كيف يمكنك رؤية كود html الخاص بموقع الويب باستخدام برنامج Notepad++ وإجراء تغييرات على تصميم أي قالب باستخدام مثال لكيفية تغيير لون الخط. يوجد في الفيديو تفاصيل دقيقة أخرى للتعامل مع المدونة. وبالنسبة لأولئك الذين هم أقرب وأكثر قابلية للفهم من النص، يوجد أدناه تحليل مفصل للموضوع مع لقطات الشاشة.
httpv://youtu.be/uIlVvwCt2ho
سيكون من الأدق عنوان المقال " كيفية العثور على كود CSS"، لكنني قررت استخدام الاسم "الخاطئ"، لأن الإجابة على هذا السؤال موجودة في html. CSS وHTML شيئان مختلفان تمامًا، على الرغم من أنهما جزءان من نفس النظام. هناك العديد من المقالات التقنية على الإنترنت، وهنا يكفي أن نفهم ما يلي:
وإذا كنت تتساءل عن كيفية تغيير، على سبيل المثال، لون عنوان الموقع، أو حجم الخط في النصوص، أو لون الرؤوس في الشريط الجانبي، فأنت بحاجة إلى البحث عن كل هذا في ورقة أنماط CSS. هذا هو الشيء الوحيد الذي يستحق الفهم أولاً لإجراء تغييرات على الكود بنفسك.
أحب أن أجعل المعقد بسيطًا. أتذكر منذ زمن طويل، عندما امتلكت سيارتي الأولى، كانت قديمة جدًا، وكانت الأسلاك فاسدة، وكثيرًا ما كانت الصمامات تنفجر، وفي كل مرة كنت أسحبها إلى محطة الخدمة. تخيل مقدار الأموال التي تم إهدارها، على الرغم من حقيقة أن استبدالها بنفسك، كما اتضح، يكلف فلسا واحدا.
ذات يوم نظرت إلى ما يفعله السيد بالضبط. ما زلت لا أعرف كيف يعمل المصهر. لكني أعرف مكان تغييره). لن أقوم بإصلاح المحرك بنفسي، وليس من الصعب استبدال المصهر. إنه نفس الشيء مع مواقع الويب.
إذا كنت لا تريد أن تصبح مبرمجًا، فلا داعي لأن يكون لديك فهم عميق للبرمجة. من الواضح بما فيه الكفاية أن نفهم ما هو المقصود، وأين تبحث عنه وكيفية تغييره. ومن الأفضل أن تغير ما تستطيعه بنفسك، وتترك كل شيء آخر للمتخصصين. تحتوي المقالة على رابط مفيد حول هذا الموضوع.
غالبًا ما تكون هناك مناقشات على مدونات تحسين محركات البحث (SEO) حول ما إذا كان المبتدئ يحتاج إلى فهم عميق لـ HTML، أو حتى الأفضل، تعلم كيفية كتابة مواقع الويب بنفسه بحيث يكون كل شيء فريدًا.. حسنًا، لا أعرف - لكل واحد خاصته، وهنا ما هو أقرب لمن هو أقرب. أنا مهتم أكثر قليلاً، لذا فأنا الآن أتعلم المزيد من فلاديمير. في نوفمبر من هذا العام، افتتح فلاديمير مدونته الخاصة. تم إنشاء مدونته باستخدام أبسط قالب مجاني، وقد قام بتعديله بشكل طفيف فقط ليناسب نفسه.
بعد 10 أيام من وجودها، احتلت المدونة المرتبة 104 في تصنيف جميع مواقع Runet مع حركة مرور تبلغ حوالي 1.5 ألف شخص يوميًا. في 10 أيام. إذن ما هو الاتفاق؟ يتمتع فلاديمير بخبرة جيدة في لغة HTML ويمكنه أن يطلب ويشتري قالبًا فريدًا لنفسه. لذلك يجب أن تفهم ذلك السر لا يكمن في القوالب، بل في فائدة المعلومات.
آسف على الاستطراد، دعنا نعود إلى رموزنا). لنفترض أنك تريد تغيير لون الخط لعنوان مدونتك. دعونا نلقي نظرة على مثال موقع الاختبار الخاص بي.
هام: لا تخلط بين هذا وبين عرض رمز الصفحة! لا نحتاج إلى الصفحة بأكملها الآن، فقط عنصر منفصل.
انقر عليها - تظهر نافذة عرض الكود أسفل المتصفح:
يتم تمييز سطر التعليمات البرمجية الذي نقوم بتغييره باللون الأحمر.
لكن المنطقة المظللة باللون الأزرق تحتوي على ما نبحث عنه. هذا هو المكان الذي يمكنك العثور فيه على سطر التعليمات البرمجية الدقيق (غير التقريبي) المسؤول عن الخطوط واللون والحجم والتمييز وما إلى ذلك. بهذه الطريقة يمكنك معرفة أي كود لأي عنصر في أي قالب.
ابحث عن السطر المطلوب في الكتلة المظللة باللون الأزرق. يوجد شريط تمرير على اليمين، يمكنك التمرير فيه والعثور على السطر الذي تحتاجه.
المبدأ العام لمكان البحث عن الأشياء:
اسم الخط - في سطر FONT FAMILY
حجم الخط - في سطر حجم الخط
لون الخط - في سطر اللون
فيما يلي ثلاثة خطوط رئيسية يتغير فيها اسم وحجم ولون الخط لأي عنصر. على اليمين في سطر النمط CSS، يتم تحديد موضع السطر في المستند. إذا كنت بحاجة إلى تغيير بعض العناصر الأخرى (على سبيل المثال، تحتاج إلى معرفة مكان الخط حيث يمكنك تغيير لون شريط القائمة أو لون الروابط)، فسيتم كل شيء بنفس الطريقة تمامًا.
انتباه:
الخط الذي سنقوم بنسخه مظلل باللون الأحمر في الشكل،
بحيث يمكنك العثور عليه لاحقًا في ورقة الأنماط.
4. انسخ السطر. وبما أننا في هذا المثال نريد تغيير لون اسم الموقع، فقد قمت بنسخ الخط الموضح بالمستطيل الأحمر في الصورة الثانية. في القالب الخاص بي هو المسؤول عن تغيير لون عنوان الموقع:
#header h1 a، #header h1 a: تمت الزيارة (
ابحث عن السطر المطلوب في ملف "ورقة الأنماط (style.css)". وقد تم ذلك بالفعل في لوحة الإدارة. أطلب بشدة أنه على الرغم من عدم وجود ثقة وفهم كامل، يجب إجراء جميع التجارب على نطاق فرعي للاختبار من أجل استبعاد .
لذلك، انتقل إلى لوحة الإدارة: CONSOLE - APPEARANCE - EDITOR. في الشريط الجانبي الأيمن نجد الملف STYLE TABLE (STYLE.CSS)، افتحه.
افتح الآن سطر البحث باستخدام المفاتيح CTRL + F: ستظهر نافذة سطر فارغة في النافذة العلوية. نلصق فيه السطر الذي نسخناه في الخطوة 4.
وسترى كيف سيتم تمييز هذا الخط في ورقة الأنماط (باللون البرتقالي في الصورة):
نقوم بإجراء تغيير على العنصر. في حالتنا، نقوم بتغيير لون الخط، لذلك في سطر اللون نستبدل قيمة أخرى - اللون الذي نريده. في المثال اللون أسود، معناه هو:
يمكنك تحديد لون في أي خدمة لوحة ألوان ويب: اكتب "لوحة ألوان الويب" في محرك البحث وحدد اللون الذي تريده. نختار لونًا وننسخ قيمته الرقمية ونستبدله بعناية باللون القديم. وبعد ذلك نضغط على تحديث الملف ونذهب لنرى ما حدث.
إذا لم يتم عرض التغييرات، خلال الساعة الماضية وانتقل إلى الصفحة مرة أخرى - يجب عرض كل شيء هذه المرة.
يستغرق الوصف وقتًا طويلاً، ولكن في الممارسة العملية يتم كل شيء بسرعة، خاصة عندما تظهر المهارة الأولية.
بمزيد من التفاصيل، كيفية تغيير عناصر معينة:
هذا كل شيء لهذا اليوم، لن أزعجكم بالرموز بعد الآن. آمل أن تتمكن الآن بنفسك من العثور بسهولة على أي عنصر في كود html وتغييره، أو بالأحرى كود CSS - دع الخبراء يغفرون لي لتبسيطه. وإذا لم تكتشف ذلك، فلا يزال عليك زيارة الصفحة. لا تضيعوا وقتكم على هراء.
أقترح مشاهدة فيديو Artem Abramovich حول كيفية البحث والعثور على أي كلمة أو عنصر في أي موضوع/قالب، لأي محرك (Wordpress، Joomla، إلخ) واستبدالها بما تحتاجه: