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

التعليقات في HTML

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

مثال على التعليقات في HTML

التعليقات في CSS

يتم إنشاء التعليقات في CSS باستخدام الأحرف: /* و*/. لإنشاء تعليق، ما عليك سوى وضع رمز صفحة الويب بين هذه الأحرف:

/* بداية كتلة بأنماط للجسم*/ body ( الخلفية: #efeded؛ عائلة الخط: Verdana، Helvetica، sans-serif؛ حجم الخط: 12 بكسل؛ الهامش: 0px؛ الحشو: 0px؛ ) /* نهاية كتلة تحتوي على أنماط للجسم*/

التعليقات في PHP

يمكن أن تكون التعليقات في PHP أحادية السطر أو متعددة الأسطر:

1) يتم إنشاء التعليقات ذات السطر الواحد في PHP باستخدام الأحرف: //. ما عليك سوى وضع هذا الحرف أمام السطر وسيتم التعليق عليه. يُستخدم هذا الخيار في حالة كون التعليق يتكون من سطر واحد فقط.

2) لتنفيذ التعليقات متعددة الأسطر، يتم استخدام الرموز التالية: /* و */. يكون هذا الخيار مفيدًا إذا كان التعليق يمتد لعدة أسطر.

لذلك تعلمنا أن نفعل

مرحبًا أيها الأصدقاء وضيوف المدونة! سأخبرك اليوم باستخدام PHP وMySQL. وسنتحدث عنها أيضًا أنظمة التعليق للموقعوسوف نختار الأفضل لموقعك من بين ما أقدمه.

سؤال واحد: باستخدام بي إتش بي وماي إس كيو إل?

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

بطاقة تعريفهو معرف فريد.
page_id- سيخزن هذا الحقل معرف صفحة الموقع التي يوجد عليها هذا التعليق.
اسم- هذا هو اسم المعلق الذي ترك هذا التعليق.
text_comment— وبناء على ذلك، هذا هو نص التعليق الحالي.

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

اسمك:

تعليقك:

انه سهل نموذج HTMLتعليقات للموقع. يمكنك وضعه على موقع الويب الخاص بك في مكان مناسب لترك تعليق على منشور - بطبيعة الحال، أسفل المنشور نفسه.

query("INSERT INTO `comments` (`name`, `page_id`, `text_comment`) VALUES ("$name"، "$page_id"، "$text_comment")");// أضف تعليقًا إلى رأس الجدول (" الموقع: ".$_SERVER["HTTP_REFERER"]);// هل نعيد التوجيه مرة أخرى؟>

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

query("SELECT * FROM `comments` WHERE `page_id`="$page_id""); // جلب جميع التعليقات لهذه الصفحة while ($row = $result_set->fetch_assoc()) ( print_r($row); // صدى تعليقات الإخراج "
"; } ?>

هذا كل شئ! ملكنا نموذج بسيطتم إنشاء تعليقات للموقع ويمكن أن تعمل على الموقع.

ولكن هذا بالتأكيد ليس للمبتدئين الذين لن يهتموا بكل أكواد HTML وPHP وMySQL. ولن يتعلم كيفية إنشاء قاعدة بيانات. إنه يحتاج إلى كل شيء دفعة واحدة وبسرعة وبدون صداع. أنا على حق؟ بالطبع أنت على حق!

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

أنظمة التعليق للموقع. أي واحد تختار؟

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

بمساعدة التعليقات على الموقع، يزداد ترتيب الموقع في نتائج البحث ويتحسن العوامل السلوكية، فيزداد عدد الزيارات إلى الموقع، وبالتالي تزداد أرباحك. ترى مدى أهمية التعليقات للموقع!

لذلك دعونا نلقي نظرة كيفية الإدلاء بالتعليقات على الموقعوأي واحد نظام التعليقاختيار الخيار الأفضل؟

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

سأعطيك الآن علامة واحدة من شأنها أن تضع كل شيء في مكانه على الفور ولن تطرح أي أسئلة حول اختيار نظام التعليق للموقع:

هنا يمكنك أن ترى بوضوح أي نظام تعليق هو الأفضل والعديد من الأنظمة المقدمة التي يستخدمها مشرفو المواقع غالبًا على مواردهم. أعتقد أن التفسيرات غير ضرورية هنا والخيار لك!

الخطوة 1 - XHTML

أولاً، دعونا نلقي نظرة على علامة التعليق. هذا الرمزتم إنشاؤها بواسطة PHP مع الفئة تعليق .

تجريبي.php

شعبة الصورة الرمزية يحتوي على رابط (إذا أدخل المستخدم عنوان URL الصحيح عند نشر تعليق) وصورة رمزية نحصل عليها من موقع gravatar.com. سنعود إلى إنشاء الترميز في خطوة PHP. وأخيرا اتبع شعبة اسم شعبة وقت ونص التعليق.

عنصر آخر مهم في XHTML هو نموذج التعليق. تم إرسالها معها بريد. يجب إكمال جميع الحقول باستثناء عنوان URL.

تجريبي.php

يتم إرسال النموذج باستخدام AJAX. يتم تشغيل الفحص في الخلفية إرسال.php. يحتوي كل حقل على العنصر المقابل ملصق، مع مجموعة السمات ل .

الخطوة 2 - PHP

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

تجريبي.php

/* / حدد جميع التعليقات واملأ مصفوفة التعليقات $ بالكائنات */ $comments = array(); $result = mysql_query("اختر * من التعليقات ORDER BY id ASC"); بينما($row = mysql_fetch_assoc($result)) ( $comments = تعليق جديد($row);)

يقوم استعلام MySQL بتحديد جميع السجلات من الجدول ويملأ المصفوفة تعليقات $كائنات الطبقة تعليق. يتم إخراج هذه المصفوفة بشكل أكبر عند تنفيذ البرنامج النصي.

تجريبي.php

/* / طباعة التعليقات واحدًا تلو الآخر: */ foreach($comments as $c)( echo $c->markup(); )

كل تعليق له طريقة وضع علامة على()، الذي يولد HTML الصحيحالكود جاهز للعرض على الصفحة. فيما يلي تعريفات الفئة والطريقة.

يحصل الفصل على صف من قاعدة البيانات (تم الحصول عليه باستخدام mysql_fetch_assoc()) ويخزنها في متغير بيانات $. وهي متاحة فقط لطريقة الفصل.

comment.class.php - الجزء الأول

تعليق الفئة (بيانات خاصة $=صفيف(); وظيفة عامة __construct($row) ( /* / Constructor */ $this->data = $row;) علامة الوظيفة العامة() ( /* / هذه الطريقةيُخرج ترميز XHTML للتعليق */ // قم بتعيين اسم مستعار حتى لا نضطر إلى كتابة $this->data في كل مرة: $d = &$this->data; $link_open = ""; $link_Close = ""; if($d["url"])( // إذا تم إدخال عنوان URL عند إضافة تعليق، // حدد علامتي الفتح والإغلاق للرابط $link_open = ""; $link_ Close = ""; ) // تحويل الوقت لتنسيق UNIX: $d["dt"] = strtotime($d["dt"]); // مطلوب لتعيين الصورة الافتراضية: $url = "http://".dirname($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"])."/img/default_avatar.gif"; يعود " "; }

يستخدم البرنامج النصي gravatar لتمثيل الصورة الرمزية في التعليقات. Gravatar هي خدمة مفيدة جدًا تقوم بمطابقة الصورة الرمزية مع عنوان البريد الإلكتروني. يمكن الحصول على الصورة الرمزية بسهولة عن طريق تمرير الوظيفة المشفرة MD5()عنوان بريدك الإلكتروني على gravatar.com.

يحدد البرنامج النصي عنوان URL حيث يتم تنفيذه ويحدد العنوان الدقيق للصورة default_avatar.gif. يتم إرسال هذه الصورة بالتوازي مع تجزئة md5، وإذا لم يتم العثور على صورة رمزية لعنوان البريد الإلكتروني المرسل، فسيتم عرض صورة بديلة.

comment.class.php - الجزء 2

public static function validate(&$arr) ( /* / تُستخدم هذه الطريقة للتحقق من صحة البيانات المرسلة عبر AJAX. // تُرجع صواب/خطأ اعتمادًا على صحة البيانات، وتملأ / مصفوفة $arr، التي تم تمريرها كمعلمة تحتوي على بيانات أو رسالة خطأ */ $errors = array(); $data = array(); // استخدم وظيفة filter_input المقدمة في PHP 5.2.0 if(!($data["email"] = filter_input(INPUT_POST,"email ",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "الرجاء إدخال بريد إلكتروني صالح."; ) if(!($data["url"] = filter_input(INPUT_POST,"url" ,FILTER_VALIDATE_URL))) ( // إذا تم إدخال عنوان URL غير صحيح في حقل عنوان URL، // تصرف كما لو لم يتم إدخال عنوان URL: $url = "") // استخدم مرشحًا مع وظيفة الإرجاع: if(!( $data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) ( $errors["body"] = "الرجاء إدخال نص التعليق ."; ) if(!( $data["name"] = filter_input(INPUT_POST,"name",FILTER_CALLBACK,array("options"=>"Comment::validate_text"))))) ( $errors["name" ] = "الرجاء إدخال الاسم."; ) if(!empty($errors))( // إذا كانت هناك أخطاء، فانسخ مصفوفة $errors إلى $arr: $arr = $errors; return false;) // إذا تم إدخال البيانات بشكل صحيح، فامسح البيانات و انسخه إلى $arr : foreach($data as $k=>$v)( $arr[$k] = mysql_real_escape_string($v);) // يجب أن يكون البريد الإلكتروني موجودًا أحرف صغيرة: $arr["email"] = strtolower(trim($arr["email"])); عودة صحيحة؛ )

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

تستخدم الطريقة ميزة جديدةعامل التصفية، الذي أصبح متاحًا في بي إتش بي 5.2.0. بهذه الطريقة يمكننا بسهولة فحص وتصفية البيانات التي تم تمريرها إلى البرنامج النصي. على سبيل المثال، filter_input(INPUT_POST,'url',FILTER_VALIDATE_URL)يعني أننا نتحقق مما إذا كان $_POST["url"]صحيح عنوان URL. إذا كان الأمر كذلك، فإن الدالة ترجع قيمة المتغير، وإلا فإنها ترجع القيمة خطأ شنيع.

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

من الممكن أيضًا تحديد الوظيفة التي ستقوم بإجراء تعديلات إضافية على البيانات.

comment.class.php - الجزء 3

وظيفة ثابتة خاصة validate_text($str) ( /* / يتم استخدام هذه الطريقة كـ FILTER_CALLBACK */ if(mb_strlen($str,"utf8")<1) return false; // Кодируем все специальные символы html (<, >، "، & .. إلخ) وتحويل // حرف السطر الجديد إلى علامة
: $str = nl2br(htmlspecialchars($str)); // إزالة أي أسطر جديدة متبقية $str = str_replace(array(chr(10),chr(13)),"",$str); إرجاع $str; )

الطريقة الأخيرة validate_textتم تمريرها كدالة إرجاع في مكالمتين filter_input. فهو يحول جميع أحرف HTML الخاصة، مما يمنع هجمات XSS بشكل فعال. كما أنه يستبدل الأسطر الجديدة بالعلامات
.

إرسال.php

/* / سيتم ملء هذا المصفوفة إما بالبيانات / التي تم تمريرها إلى البرنامج النصي، أو / أو رسائل الخطأ. /*/ $arr = array(); $validates = Comment::validate($arr); if($validates) ( /* كل شيء على ما يرام، أدخل البيانات في قاعدة البيانات: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["name"]." ", "".$arr["url"].", "".$arr["email"].", "".$arr["body"]."")"); $arr["dt "] = date("r",time()); $arr["id"] = mysql_insert_id(); /* / البيانات الموجودة في $arr مُجهزة لاستعلام mysql، / لكننا بحاجة إلى إخراجها إلى الشاشة ، لذا / قم بإعداد جميع العناصر في المصفوفة: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); json_encode(array("status) "=>1,"html"=>$insertedComment->markup()) ) else ( /* عرض رسائل الخطأ */ echo "("status":0,"errors": ".json_encode($arr )."");

إرسال.phpيحصل على تعليق من البيانات عبر طلب AJAX. يتحقق من صحته ويخرج كائن JSON يحتوي إما على علامة XHTML مع تعليق مدرج، أو قائمة بالأخطاء. يستخدم jQuery الخاصية حالةلتحديد ما يجب إخراجه - إما رسالة خطأ أو إضافة علامة تعليق إلى الصفحة.

فيما يلي مثالان.

استجابة ناجحة

( "الحالة": 1، "html": "يظهر هنا كود HTML الخاص بالتعليق..." )

ملكية لغة البرمجةيحتوي على رمز التعليق.

استجابة الخطأ

( "الحالة": 0، "أخطاء": ( "البريد الإلكتروني": "الرجاء إدخال بريد إلكتروني صالح."، "النص": "الرجاء إدخال نص التعليق."، "الاسم": "الرجاء إدخال اسم.") )

إذا كان هناك خطأ، فإن jQuery يتكرر عبر كائن الأخطاء ويعرض الرسائل بجوار الحقول التي تحتوي على أخطاء.

الخطوة 3 - CSS

الآن بعد أن تم إنشاء العلامات وعرضها بشكل صحيح على الصفحة، يمكننا الانتقال إلى إعداد الأنماط.

style.css - الجزء الأول

.comment, #addCommentContainer( /* نمط التعليقات */ الحشو:12px; العرض:400px; الموضع:نسبي; لون الخلفية:#fcfcfc; الحدود:1px أبيض خالص; اللون:#888; الهامش السفلي:25px; / * زوايا وظلال مستديرة في CSS3 */ -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:2px 2px 0 -webkit-box-shadow:2px 2px 0 #c2c2c2; -shadow:2px 2px 0 #c2c2c2; ) .comment .avatar( /* / تم وضع الصورة الرمزية بشكل مطلق. / الإزاحة الخارجية للتعليق div /*/ height:50px; left:-70px; Position :absolute; width:50px الخلفية: url("img/default_avatar.gif") بدون تكرار #fcfcfc; /* المركز عموديًا: */ Margin-top:-25px; #c2c2c2;

شعبة .تعليق و #addCommentContainer لها نفس النمط. يستخدم العديد من قواعد CSS3 لتقريب الزوايا وعكس الظلال.

style.css - الجزء الثاني

.comment .avatar img(display:block;) .comment .name(font-size:20px;padding-bottom:10px;color:#ccc;) .comment .date(font-size:10px;padding:6px 0; Position:absolute; top:10px; ) .comment p, #addCommentContainer p( Font-size:18px; line-height:1.5; overflow-x:hidden;) #addCommentContainer input, # addCommentContainer textarea( /* نمط الإدخال */ عرض: كتلة؛ الحدود: 1 بكسل الصلبة #ccc؛ الهامش: 5 بكسل 0 5 بكسل؛ حجم الخط: #555؛ :300 بكسل ؛) التسمية (حجم الخط: 10 بكسل ؛) تسمية النطاق. خطأ (اللون: أحمر ؛ الموضع: نسبي ؛ يمين: -10 بكسل ؛) #submit ( / * زر الإرسال " */ لون الخلفية: #58B9EB ؛ الحدود :1px Solid #40A2D4; color:#FFFFFF; -نصف قطر الحدود:4px; -نصف قطر الحدود-webkit:4px) #submit:hover(background-color:# 80cdf5; لون الحدود:#52b1e2; )

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

الخطوة 4 - مسج

الآن دعنا ننتقل إلى jQuery.

script.js

$(document).ready(function())( /* يتم تنفيذ التعليمات البرمجية التالية فقط بعد تحميل DOM */ /* تمنع هذه العلامة إرسال تعليقات متعددة: */ var Working = false; /* التقاط النموذج حدث الإرسال: */ $(" #addCommentForm").submit(function(e)( e.preventDefault(); if(working) return false; Working = true; $("#submit").val("Working. ."); $("span .error").remove(); /* إرسال حقول النموذج إلى Submit.php: */ $.post("submit.php",$(this).serialize(),function( msg)( Working = false; $ ("#submit").val("Submit"); if(msg.status)( /* / إذا كان الإدراج ناجحًا، أضف تعليقًا / أسفل آخر تعليق في الصفحة مع تأثير SlideDown /*/ $(msg.html).hide ().insertBefore("#addCommentContainer").slideDown(); $("#body").val("" ) else ( /* / إذا كان هناك الأخطاء، قم بالتكرار عبر الكائن / msg.errors وعرضها على الصفحة /*/ $.each(msg.errors,function(k,v)( $("label").append(" "+الخامس+""); )); ) ),"json"); )); ));

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

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

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

مستعد!

خاتمة

لتشغيل البرنامج النصي على الخادم الخاص بك، تحتاج إلى إنشاء جدول تعليقات في قاعدة بيانات MySQL الخاصة بك. يمكنك القيام بذلك باستخدام كود SQL من ملف table.sqlوالتي يجب إدخالها في علامة تبويب SQL في phpMyAdmin. فأنت بحاجة إلى تعيين معلمات الاتصال لقاعدة بيانات MySQL في الملف Connect.php .

مدة القراءة: 55 دقيقة

يوم جيد للجميع.

لقد حان الوقت الآن للحصول على المادة التي طال انتظارها حول العلامات الدقيقة.

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

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

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

ما هو العلامات الدقيقة ولماذا هو مطلوب؟

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

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

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

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

يمكنك رؤية مثال صارخ على هذه المقتطفات أدناه.

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

سلسلة التنقل هذه بسيطة للغاية. كل ما عليك فعله هو تثبيتها على الموقع.

إليك خيارًا آخر للمقتطفات المنسقة.

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

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

دعونا الآن نجيب على سؤال قد يشغل بال من يعتقد أن العلامات الدقيقة تساعد في زيادة المراكز وهي أحد عوامل التصنيف.

هل يؤثر العلامات الصغيرة على التصنيف؟ فهل نتوقع زيادة في المواقف بعد تنفيذه؟

من أجل عدم كتابة أسبابنا، ننتقل إلى مساعدة محرك بحث Yandex. إذن، ماذا يخبرنا ياندكس نفسه عن هذا؟ انا اقتبس:

هل سيتم تصنيف موقعي بشكل أفضل إذا استخدمت الترميز؟

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

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

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

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

1. أولاً، يمكننا أن نستنتج أن الثقة في الموقع من محركات البحث تزداد، حيث نقوم بتوجيه روبوت البحث إلى العناصر الرئيسية للموقع، دون الخوف من أن يكون هناك خطأ ما ودون محاولة إخفاء شيء ما عن روبوت البحث. ونتيجة لذلك، فمن المنطقي أن تعتقد محركات البحث أننا نساعدها ونكشف لها عن "روح الموقع"، وهو ما سيؤثر بالتأكيد على جودة فهرسة الموقع، وفي النهاية مواقعه؛
2. ثانيًا، باستخدام الإعدادات المناسبة، يمكننا إبراز مقتطفنا في نتائج البحث، مما سيؤدي إلى زيادة فورية في حركة المرور إلى صفحات الموارد دون تغيير المواضع. في النهاية، ستؤدي الزيادة في حركة المرور إلى زيادة الصفحات الفردية في نتائج البحث والموقع ككل؛
3. ثالثًا، نقوم بزيادة العامل السلوكي - نسبة النقر إلى الظهور (CTR) في نتائج البحث (نسبة النقر إلى الظهور). ترتبط هذه النقطة ارتباطًا وثيقًا بالنقطة السابقة. نظرًا لأن المزيد من الأشخاص ينقرون على موقعنا، فهذا يعني أننا ساعدنا الزائر بشكل أكثر دقة على فهم أن صفحتنا ذات جودة أعلى من المواقع الأخرى. وهذا يعني أن الموقع يحتاج إلى أن يتم رفعه قليلاً في نتائج البحث.

لذا، أعتقد أن الإجابة على السؤال قد تم تقديمها.

هل الترميز ضروري على الإطلاق؟ - نعم أنا أحتاجه.

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

بمجرد أن نعرف الفوائد الرئيسية، يمكننا الانتقال إلى النظر في الأنواع الرئيسية للعلامات الدلالية.

الأنواع الرئيسية للعلامات الدقيقة

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

يمكن فهم القاموس على أنه لغة ترميزية صغيرة تتضمن مجموعة من الفئات والخصائص التي تشير إلى جوهر محتوى الصفحة. في كل قاموس، يتم تحديد كل عنصر في الموقع باستخدام علامات مختلفة. على سبيل المثال، في قاموس Schema.org، تتم الإشارة إلى اسم المستند باستخدام علامة "الاسم"، ولكن تنسيقات microformat تستخدم فئة CSS داخل كتلة العنصر التي تستحق الترميز ( البابونج، حيث fn org هي علامة العنوان في هذه الحالة).

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

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

من التعريف السابق حول بناء الجملة، تم تقديم مفهوم الجوهر. ماذا يعني هذا ينطبق على القضية المطروحة؟

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

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

• الصفحة الرئيسية - قائمة الإعلانات.
• صفحة المنشورات - التعليقات، المحتوى، التقييم (إن وجد)، مسارات التنقل؛
• صفحة ثابتة عادية - المحتوى والتعليقات (إن وجدت).

بالإضافة إلى ذلك، في كل نوع من الصفحات، يمكنك تعيين نفس العنصر - رأس الموقع، التذييل (التذييل)، الشريط الجانبي (العمود الجانبي)، القائمة الرئيسية.

ولكل كيان خصائصه الخاصة، على سبيل المثال:

• منطقة المحتوى في صفحة المنشورات - عنوان المقالة، نص المقالة، الوصف، اسم مؤلف المقالة، تاريخ النشر، الفئة، الصور، مقاطع الفيديو وغيرها؛
• مساحة قائمة الإعلانات على الصفحة الرئيسية والأقسام والمحفوظات هي نفسها؛
• منطقة التعليق - اسم المعلق والتاريخ ونص التعليق؛
• منطقة المحتوى في الصفحة الثابتة العادية هي في الأساس نفس المساحة الموجودة في المنشورات؛
• منطقة رأس الموقع - العنوان والوصف؛
• منطقة التصنيف على الصفحات - الحد الأقصى للتصنيف، والتصنيف الحالي، وعدد التقييمات.
• منطقة التذييل (تذييل الموقع) - سنة حقوق النشر؛
• منطقة الشريط الجانبي (العمود الجانبي) - اسم عناصر واجهة المستخدم؛
• منطقة القائمة الرئيسية - الروابط.

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

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

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

لن نأخذ في الاعتبار جميع القواميس وقواعد النحو، لأن هذا لا معنى له. لن تحتاج لهم. دعونا نناقش بإيجاز فقط تنسيقات الترميز الرئيسية:

• Schema.org;
• فتح الرسم البياني.
• تنسيقات دقيقة.

وسوف نتطرق إلى بعض الباقي قليلاً.

الخطوة الأخيرة تجدر الإشارة إلى قاموس آخر، وهو Data Vocabulary، والذي تم تطويره بواسطة Google والآن تم تعليق تطويره. تحول كل الاهتمام إلى Schema.org. يمكننا القول أن جميع الخصائص والكيانات التي كانت موجودة في لغة الترميز هذه أصبحت نماذج أولية للترميز من schema.org.

بقدر ما أفهم، يمكن لقاموس مفردات البيانات العمل مع بناء الجملة: البيانات الجزئية ولغة RDF، والتي يمكن رؤيتها بوضوح شديد في مساعدة Google على مواد العلامات الدقيقة لمسار التنقل. هناك خياران للترميز:

1. وضع علامات على مفردات البيانات باستخدام البيانات الجزئية؛
2. ترميز مفردات البيانات باستخدام RDFa.

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

ما هو تنسيق الترميز الأفضل للاستخدام؟

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

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

وتثير هذه النقطة أيضًا مسألة الجمع بين قواميس مختلفة في موقع واحد. وهذا أمر مقبول وفي بعض الحالات لا يمكن تجنبه. يظهر هذا بوضوح في مثال ترميز مسار التنقل، عندما يتم دمج متغير ترميز مفردات البيانات وترميز البيانات الجزئية من Schema.org. ثيريس حرج في ذلك. ياندكس نفسها تتحدث عن هذا.

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

كيفية التحقق من وجود الترميز على موقع على شبكة الإنترنت

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

للتحقق من وجود العلامات، يمكنك استخدام كل من أداة التحقق من العلامات الدقيقة من Yandex وأداة التحقق من البيانات المنظمة من Google. أفضّل وأوصي بشدة باستخدام أداة التحقق من صحة Yandex، لأنها أبسط بكثير.

بعد الانتقال إلى أداة التحقق من صحة Yandex، ندخل عنوان الصفحة ونضغط على "التحقق".

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

لذلك، أقوم بتحليل صفحة النشر وتبين أن تعليقات القالب تم تمييزها بتنسيقات microformat (يوجد vcard). ويتجلى ذلك من خلال رموز مختلفة في نتائج المسح.

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

الآن دعونا نلقي نظرة على عملية إزالة ترميز الطرف الثالث.

إزالة ترميز الطرف الثالث

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

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

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

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

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

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

هذه هي الطريقة التي ظهر بها هذا الجزء من التعليمات البرمجية مع vcard في ملف القالب الخاص بي.

وبعد التغيير أصبح هكذا.

لقد قمت أيضًا بإجراء تغييرات على الأنماط.

الآن لا توجد تنسيقات microformat وتم الحفاظ على التصميم في حالته الأصلية.

لذا، عندما نزيل العلامات القياسية (إذا كانت موجودة)، يمكننا تضمين علامة جديدة من Schema.org. لقد بدأنا هذه العملية.

تنفيذ العلامات الصغيرة Schema.org

لنبدأ بالقليل من الشرح والنظرية، لأنك تحتاج دائمًا إلى الاستعداد قبل التدريب.

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

• ملف Single.php (ملف التسجيل): الكيان - منطقة المحتوى (المقالة)، الخصائص - تاريخ النشر، المؤلف، الفئة، عنوان المقالة، الصور؛
• ملف Functions.php (في حالتي - ترميز رمز التعليق): الكيان - التعليق، الخصائص - نص التعليق، تاريخ واسم المعلق؛
• الملفات التي تحتوي على قائمة الإعلانات Index.php، الفئة.php، archive.php (الرئيسية، الفئات والمحفوظات، على التوالي): الكيان - قائمة الإعلانات، الخصائص - تاريخ النشر، المؤلف، الفئة، عنوان المقالة؛
• ملف page.php (صفحة ثابتة عادية - اختيارية): الكيان - منطقة المحتوى، الخصائص - عنوان النص، والتاريخ والمؤلف وغيرهم، إذا كان ذلك متاحًا؛
• في ملف header.php، قم أيضًا بوضع علامة على الرأس - سيكون الكيان هو الرأس، وستكون الخصائص هي عنوان الموقع + الوصف؛
• الملف Sidebar.php (العمود الجانبي): الكيان - الشريط الجانبي بأكمله، الخاصية - عنوان كل عنصر واجهة مستخدم؛
• ملف footer.php (تذييل الموقع): الكيان - التذييل بأكمله، الخاصية - تاريخ حقوق النشر + اسم الموقع (لم أضع علامة على الاسم)؛
• ملف header.php (الجزء العلوي من المصدر): الكيان - قائمة التنقل الرئيسية، الخاصية - الروابط + نقاط الارتساء الخاصة بها.

الآن عن العلامات والسمات التي تتوافق مع كل نوع من الكيانات والخصائص المقابلة لها. أولا عن الكيانات.

/***قائمة الإعلانات***/ itemscope itemtype="http://schema.org/BlogPosting" /***محتوى صفحة النشر***/ itemscope itemtype="http://schema.org/Article" / *** التعليقات***/ itemprop="comment" itemscope itemtype="http://schema.org/Comment" /***الصفحة الثابتة العادية***/ itemscope itemtype="http://schema.org / المقالة" /***الشريط الجانبي (الشريط الجانبي)***/ itemscope itemtype="http://schema.org/WPSideBar"> /***التذييل (تذييل الموقع)***/ itemscope itemtype="http:/ /schema.org/WPFooter"> /***التنقل في الموقع (القائمة الرئيسية)***/ itemscope itemtype="http://schema.org/SiteNavigationElement"> /***الصور***/ itemscope="" itemtype="https://schema.org/ImageObject" /***رابط دائم للصفحة***/ itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" /***المؤسسة * **/ itemscope itemtype="https://schema.org/Organization" /***العنوان***/ itemscope itemtype="http://schema.org/PostalAddress"

الآن علامات الملكية.

• عنوان الصفحة (النص) - itemprop="headline"
• نص الإدخال - itemprop="articleBody" (يمكن استخدامه أيضًا للوصف إذا تم تشكيله كجزء من النص الكامل)
• تاريخ النشر - itemprop="datePublished"
• المؤلف - itemprop = "المؤلف"
• فئة المقالة - itemprop="articleSection"
• صورة - itemprop = "صورة"
• نص التعليق - itemprop="text"
• اسم المعلق - itemprop='creator'
• تاريخ التعليق - itemprop="datePublished"
• الرابط (ينطبق على القائمة الرئيسية والصورة) - itemprop="url"
• سنة حقوق النشر في التذييل - itemprop="copyrightYear"
• تاريخ اخر تغيرالصفحات - itemprop="dateModified"
• العنوان - itemprop = "العنوان"
• الشارع - itemprop = "streetAddress"
• الفهرس - itemprop="postalCode"
• موقع العنوان - itemprop="addressLocality"
• الهاتف - itemprop = "الهاتف"
• طول الصورة - itemprop = "العرض"
• عرض الصورة - itemprop = "الارتفاع"
• الشعار - itemprop = "logo"

هذه هي الخصائص الرئيسية التي سنستخدمها الآن.

الخطوات الإضافية لترميز القالب بسيطة للغاية.

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

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

الآن تدرب. على سبيل المثال، يوجد ملف منشور واحد (مقال) Single.php. لنبدأ بوضع العلامات عليها.

العلامات الدقيقة للمنشور (مقالة)

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

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

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

وأصبح الأمر هكذا:

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

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

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

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

"/>

• السطر الأول مسؤول عن إخراج سطر يشير إلى عنوان الصفحة ويقول أن هذه الصفحة بالذات هي الصفحة الرئيسية.
• السطر الثاني - تاريخ آخر تعديل للصفحة.

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

اسم الشارع فِهرِس البلد، المنطقة، المدينة هاتف

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

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

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

عنوان المشاركة. كان:

تاريخ النشر. كان:

كونستانتين خميليف

كونستانتين خميليف

".$اسم_الفئة_الحالية."

".$اسم_الفئة_الحالية."

نص المقال. كان:

هنا رمز الطرف الثالث

هنا رمز الطرف الثالث

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

في الفقرة قبل الأخيرة من المقال، سأقدم لك رموزًا يمكنك استخدامها إذا فقدت شيئًا ما فجأة.

لذا، علينا الآن التحقق من صفحتنا في أدوات التحقق من Yandex وGoogle.

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

يمكنك ترميز كل صورة يدويًا، وتغليفها في جوهر الصور وتحديد الخصائص الضرورية، ولكن هذا غير مريح تمامًا عندما يكون هناك عشرات الصور في كل مشاركة. دعونا نستخدم الكود التالي.

الدالة micro_images_captions ($a , $attr, $content = null)( extract(shortcode_atts(array("id" => ""، "align" => "alignnone"، "width" => ""، "caption" = > ""), $attr)); if (1 > (int) $width || فارغ($caption)) return $content; ="" . esc_attr($id) "" "؛ إرجاع ".

" . do_shortcode($content) ."

" . $تسمية توضيحية ."

";) الدالة micro_image($content) ( $ar_mk = "! !si"; $br_mk = " "; $content = preg_replace($ar_mk, $br_mk, $content); return $content; ) add_filter("the_content", "micro_image"); add_filter("img_caption_shortcode", "micro_images_captions", 10, 3);

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

لا ينبغي أن يكون هناك أي أخطاء. كل شيء واضح. يجب أن تكون كل صورة ملفوفة بعلامات، تمامًا كما في لقطة الشاشة أعلاه.

العلامات الدقيقة للصفحة الرئيسية

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

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

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

الوظيفة micro_thumbnail($content) ( $ar = "!!si"; $br = ""; $content = preg_replace($ar, $br, $content); return $content; ) add_filter("post_thumbnail_html", "micro_thumbnail" ");

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

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

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

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

لذلك، التعليقات. دعونا نبسط المهمة لإدراج رمز واحد في ملف jobs.php وتعديل الوظيفة التي تعرض التعليقات على صفحات الموقع. أولاً، خذ الكود التالي وضعه داخل ملف function.php في البداية، قبل علامة الفتح مباشرةً< ?php. Если будет выдавать ошибку, можно попробовать его разместить после закрывающего тега?>في نهاية الملف.

يوجد أيضًا خيار تحديد الموضع عندما تحتاج إلى إزالة الفتحة في هذا الرمز في البداية كود PHP(يمسح< ?php) и в самом конце его закрытие (удалить?>). ثم تحتاج إلى وضع الكود ليس قبل أو بعد علامة الفتح (الإغلاق) php، ولكن داخل هذه العلامات بجوار جميع الوظائف الأخرى. في بعض الأحيان واجهت مشكلة عندما يعمل خيار الموضع المحدد هذا.

الكود لا يعمل على جميع القوالب!

< معرف = "تعليق-">

٪س:

")، get_comment_author_link())؛ ?>comment_approved): ?>

$add_below, "العمق" => $العمق, "max_العمق" => $args["max_عمق"]))); ?>

$add_below, "العمق" => $العمق, "max_العمق" => $args["max_عمق"]))); ?>