با سلام خدمت خوانندگان محترم سایت وبلاگ. تصمیم گرفتم انتشار امروز را به موضوع نوشتن مقاله در ویرایشگر HTML وردپرس اختصاص دهم.

واقعیت این است که گاهی اوقات نمی توان از ویرایشگر بصری در پنل مدیریت استفاده کرد (اغلب این به دلیل مشکلات میزبانی است) و بدون آن نوشتن مقالات به درستی و با طراحی زیبا برای وبلاگ نویسان تازه کار بسیار دشوار خواهد بود، زیرا یک ویرایشگر ساده ای که بدون استثنا برای همه کار می کند حداقل به .

وقتی برای اولین بار شروع به نوشتن این وبلاگ کردم و با موتور آشنا شدم، نمی توانستم از ویرایشگر تصویری استفاده کنم. نه افزونه‌های اضافی با نسخه‌های مختلف آن‌ها، و نه دیگر «رقص‌ها با تنبور» کمکی نکردند. بنابراین، خواه ناخواه، مجبور شدم به ویرایشگر اصلی موجود تسلط پیدا کنم، خوشبختانه تا آن زمان با زبان نشانه گذاری فرامتن کاملاً آشنا بودم.

فقط از ویرایشگر HTML در وردپرس استفاده کنید

اما نکته حتی در HTML نبود، بلکه در راحتی انجام کارهای روزمره و مکرر بود. بله، ویرایشگر پیش‌فرض وردپرس به شما امکان می‌دهد از یک دکمه برای اضافه کردن تگ‌های پررنگ (برچسب قوی) و مورب (EM)، درج پیوندها، نقل قول‌ها، تصاویر، لیست‌های شماره‌دار و گلوله‌دار، برجسته کردن کدهای مختلف و ... استفاده کنید.

اما این برای من کافی نبود، زیرا ... در متن مقالات، من به طور فعال از سرفصل های داخلی سطوح مختلف (از H2 تا H5) استفاده کردم، کد (PHP، CSS و غیره) را با برچسب های خاص برجسته کردم و کارهای بیشتری انجام دادم.

بنابراین، هر چیزی که در مجموعه ابزارهای استاندارد ویرایشگر اصلی وردپرس گنجانده نشده بود، باید به صورت دستی از صفحه کلید وارد می شد و این اصلا کار ایجاد پست را آسان نمی کرد و بسیار آزاردهنده بود.

اما این مشکل به لطف افزونه فوق العاده WP Post Editor Buttons با موفقیت حل شد، که با آن می توانید هر تعداد دکمه اضافی را که دوست دارید به نوار ابزار ویرایشگر HTML اضافه کنید و آنها را برای اقدامات خاص برنامه ریزی کنید.

امروز ما از ابتدا تا انتها به نوشتن پست ها در WP با جزئیات نگاه خواهیم کرد، بدون حذف نکات ظریف و تکنیک هایی که به نظر من به سایت وبلاگ کمک کرد (شما اکنون آن را می خوانید، مگر اینکه، البته، این مقاله به سرقت رفته باشد و نه ارسال شده در سایت دیگری) به سطح چند هزار بازدیدکننده منحصر به فرد می رسد.

یعنی این نشریه یک پیوست مفصل به مقاله خواهد بود (این عنوان اصلی نیست، بلکه گرفته شده است از بازتوییت یکی از خوانندگان، اما به نظر من از نام اصلی من هم موفق تر است).

در آن مقاله، نکات ظریفی را بیان کردم که به نظر من بر هجوم ترافیک (بازدیدکنندگان) موتورهای جستجو تأثیر گذاشته است، و در این پست سعی خواهم کرد به جزئیاتی بپردازم که اغلب بسیار مهم هستند و در نگاه اول واضح نیستند. .

علاوه بر این، من فکر می کنم که یک وبلاگ نویس تازه کار یا کسانی که فقط به ایجاد و اجرای پروژه خود فکر می کنند، برای یادگیری در مورد آسان بودن همه چیز در وردپرس بی علاقه نخواهند بود، اگر بدانید چه کاری و کجا باید انجام دهید تا به نتیجه دلخواه برسید. خوب، خوب، معرفی به تعویق افتاده است، وقت آن است که مستقیماً به ارائه مطالب ادامه دهید.

برای کسانی که هنوز وبلاگ WP خود را ندارند، اما تمایل دارند که وبلاگ نویس شوند، یا برای کسانی که می خواهند از موتور وبلاگ نویسی یا پلت فرم رایگان دیگر به وردپرس نقل مکان کنند، پیوندهایی به مطالب مربوط به نصب و پیکربندی اولیه آن ارائه خواهم کرد. :

بیایید شروع به نوشتن یک مقاله در ویرایشگر HTML وردپرس کنیم

بنابراین، برای نوشتن یک مقاله جدید، باید به پنل مدیریت (http://sait.ru/wp-admin/) بروید و از منوی سمت چپ (اگر از طراحی استاندارد پنل مدیریت WP استفاده می کنید) " افزودن آیتم جدید در قسمت "پست ها"

در نتیجه یک صفحه استاندارد برای افزودن مقاله (پست) باز می شود که یک فیلد برای درج عنوان آن و یک فیلد بزرگ برای وارد کردن متن پست خواهد داشت.

هنگام وارد کردن متن عنوان در فیلدی که برای این منظور در نظر گرفته شده است، هیچ ترفندی وجود ندارد، اما آنچه بسیار مهم است نحوه وارد کردن آن نیست، بلکه این است که باید از کلمات کلیدی در آن استفاده کنید. چقدر خوب عنوانی را برای پست خود انتخاب می کنید ()، پست شما در نتایج جستجو برای پرس و جوهای خاص بالاتر می رود.

اما در عین حال، عنوان یک مقاله در وردپرس باید به خوبی با متن آن ارتباط داشته باشد (مرتبط با متن پست باشد). علاوه بر این، در نتایج جستجو نشان داده می شود و سرنوشت آینده انتشارات شما به جذابیت آن بستگی دارد (اگر روی آن کلیک نکنند، عوامل رفتاری بدتر می شود و از صفحه اول خارج می شود).

معمولاً پس از نوشتن خود مقاله، نسخه نهایی عنوان را فرموله می کنم. گاهی اوقات تمام زیرعنوان های میانی را در یک فایل متنی جداگانه کپی می کنم و با نگه داشتن همه آنها در مقابل چشمانم، یک عنوان کلی را تشکیل می دهم و سعی می کنم همه چیزهایی را که در آن ذکر شد در نظر بگیرم.

احتمالاً به همین دلیل است که عناوین من بسیار طولانی هستند، اما همانطور که تمرین نشان می دهد، هیچ ایرادی در آن وجود ندارد. موتورهای جستجو با عناوین من کار بسیار خوبی انجام می دهند و نتایج جستجو بخشی از TITLE را نشان می دهد که در آن کلمات از عبارت جستجو ظاهر می شوند.

چرا عنوان برای تبلیغ یک صفحه در موتورهای جستجو بسیار مهم است؟ بله، زیرا برای آنها این معیار اصلی برای تعیین ارتباط (درجه انطباق - و سایر کلمات پیچیده) مقاله شما با یک جستجوی خاص است.

اگرچه نه، کاملاً اینطور نیست. نه عنوان پست، بلکه عنوان صفحه TITLE مهمترین معیار برای موتورهای جستجو هنگام تعیین موقعیت برای یک عبارت جستجوی خاص است (به جزئیات کامل مراجعه کنید).

پس عنوان یک پست در WP چه ربطی به آن دارد؟ و با وجود اینکه TITLE صحیح باید از عنوان مقاله به اضافه عنوان کل وبلاگ و به ترتیب تشکیل شود. به هر حال، شما می توانید شکل گیری صحیح TITLE را در وردپرس پیکربندی کنید. این افزونه به سادگی فوق العاده است و در عین حال به شما اجازه می دهد تا بسیاری از مسائل مربوط به بهینه سازی داخلی را حل کنید.

می‌خواهم توجه شما را به تفاوت بین تگ برجسته‌سازی منطقی HTML "STRONG" و یک تگ برجسته برجسته دیگر "B" و همچنین بین "EM" و "I" جلب کنم. اولین مورد از این برچسب ها (STRONG و EM) نه تنها باید برای جلب توجه خوانندگان به نکات مهم در متن استفاده شود.

موتورهای جستجو کلمات و عباراتی را که با این برچسب های تاکیدی (STRONG و EM) برجسته شده اند، با وزن بیشتری در مقایسه با کلمات معمولی و بدون تاکید در متن در نظر می گیرند. با این حال، اکنون باید در این مورد بسیار مراقب باشید تا بیش از حد پیش نروید و نروید.

انتخاب ساختار بهینه سرفصل ها در سطوح H1-H6

در حال حاضر، در مورد تگ های عنوان H1-H6، که می تواند در مقالات وبلاگ نیز برای تأکید بر کلمات و عبارات ضروری استفاده شود.

این زیرعنوان‌های داخلی، درست مانند TITLE، باید حاوی کلمات کلیدی و عباراتی باشد که می‌خواهید برای آنها در موتورهای جستجو رتبه‌بندی کنید. جستجو آنها را با وزن بیشتری نسبت به موارد معمولی در نظر می گیرد. اما باز هم، تحت هیچ شرایطی نباید کلیدها را اسپم کنید، زیرا در شرایط تبلیغات مدرن می توانید از این بابت رنج ببرید.

علاوه بر این، عنوان‌های فرعی داخلی (معمولاً از سطح H2، H3 به بعد) فرصت بیشتری برای ساختاربندی متن فراهم می‌کنند که درک آنها را توسط خوانندگان بهبود می‌بخشد.
اما یکی دیگر از مسائل بهینه سازی روی صفحه وجود دارد که مربوط به سطوح عنوان (H1 تا H6) است که در صفحات وبلاگ وردپرس استفاده می شود.

راه اصلی برای توزیع سطوح عنوان در یک صفحه وب این است که عنوان کل مقاله باید در یک تگ H1 (بالاترین سطح) قرار گیرد و باید یک در صفحه باشد و همه زیرعنوان های داخلی در متن باید با این تگ شروع شوند. H2.

به هر حال، من می خواهم یک راه بسیار راحت را به شما توصیه کنم که به شما امکان می دهد به وضوح در وردپرس ببینید که در یک سایت خاص از کجا و در چه سطحی هدر استفاده می شود. این یک افزونه برای FireFox() به نام است.

بنابراین، اگر از منوی این افزونه (منوی آن به بالای مرورگر اضافه شده است) موارد "Outlines" - "Header Outlines" را انتخاب کنید، سپس تمام مواردی که در صفحه وب که در حال حاضر در مرورگر باز هستند یافت می شوند دایره می شوند. با مستطیل های چند رنگ، که در کنار آنها شرحی وجود دارد که سطح آنها H1 -H6 است.

همانطور که از شکل بالا مشخص است، من سطح عنوان مقاله را نه H1، بلکه بر روی H2 قرار دادم، در حالی که از H1 برای ضمیمه کردن توضیحات کل پروژه استفاده می شود. نه به مقاله خاصی، بلکه به کل وبلاگ.

این Maul در یکی از مقالات خود اشاره کرد که هدر سطح H1 در سایت باید برای همه صفحات وب یکسان باشد، اما او واقعاً ایده خود را به هیچ وجه توجیه نکرد. با این حال، من دقیقا از طرح او استفاده می کنم. برای زیرعنوان های داخلی از تگ های H3 و H4 استفاده می کنم (گاهی اوقات H5 نیز).

یک نکته ظریف دیگر در صفحه اصلی، عناوین پست های من لینک هایی هستند که به صفحات وب با نسخه کامل منتهی می شوند، اما در خود این صفحات با متون کامل پست ها، عنوان مقالات دیگر لینک نیستند. یه جایی خوندم که اینجوری بهتره.

اکنون هنوز باید کمی در مورد اینکه چگونه می‌توانید سطح تگ‌های عنوان HTML را در وردپرس تغییر دهید، مثلاً برای مقاله‌ها، یا مانند من، یک سطح H1 مشترک برای همه اضافه کنید.

برای این کار، برای مثال، باید از طریق FTP به سرور میزبانی که وبلاگ شما در آن قرار دارد متصل شوید. تمامی فایل هایی که ممکن است به آن نیاز داشته باشیم در پوشه ای با قالب (قالب) وردپرسی که استفاده می کنید قرار دارند که در این مسیر می توانید آنها را پیدا کنید:

/wp-content/themes/نام تم/

برای اینکه درک واضح تری از ساختار و هدف فایل های قالب وردپرس (قالب ها) داشته باشید، به شما توصیه می کنم مقاله ای را که در همان ابتدای انتشار (در لیست) ارائه شده است، مطالعه کنید.

بیایید ببینیم کجا می‌توانید سطح عنوان اصلی مقالات موجود در صفحه اصلی (فایل INDEX مسئول ظاهر آن است) و در صفحات دارای نسخه کامل مقالات (فایل SINGLE) را تغییر دهید.

بیایید ابتدا INDEX را برای ویرایش باز کنیم. در آن عناوین مقالات وردپرس در تگ HTML H2 (سطح دوم) قرار می گیرند و علاوه بر آن لینک هستند، زیرا در تگ پیوند A قرار می گیرند:

موضوعات)

این تکنیک به شما امکان می دهد از پرانتزهای غیر ضروری اجتناب کنید. همچنین، چنین کدهایی به خوبی در زمینه HTML قرار می گیرند.

14. رویکردهای رویه ای و شی گرا

برنامه نویسی شی گرا به شما کمک می کند تا به یک ساختار کمابیش واضح پایبند باشید، اما این بدان معنا نیست که شما باید از اصول رویه ای نوشتن برنامه ها منحرف شوید.

اشیا برای نمایش داده ها عالی هستند. مثال:

کاربر کلاس ($username عمومی; $first_name عمومی; عمومی $last_name؛ عمومی $email؛ تابع عمومی __construct() ( // ... ) تابع عمومی create() ( // ... ) تابع عمومی save() (/ / ... ) تابع عمومی delete() ( // ... ) )

روش های رویه ای مزایای خاص خود را دارند.

تابع capitalize($string) ($ret = strtoupper($string)؛ $ret .= strtolower(substr($string,1)); return $ret؛ )

15. کد منبع باز را بخوانید

به طور معمول، پروژه های متن باز توسط تعداد زیادی از توسعه دهندگان نوشته می شود. از این نظر مطالعه کد نوشته شده در پروژه های مشابه می تواند به شما در کسب تجربه کمک کند. پس وقت خود را برای این موضوع تلف نکنید.

16. Refactoring

Refactoring تغییر کد بدون از دست دادن عملکرد است. همچنین می توان از آن برای بهبود خوانایی استفاده کرد. شما فقط ساختار کد خود را کمی تغییر دهید.

امیدوارم این مقاله برای شما مفید بوده باشد! آیا من چیزی را از دست داده ام؟ تجربه خود را به اشتراک بگذارید!

WordPress.com به شما اجازه استفاده از کد بالقوه خطرناک را در وبلاگ خود نمی دهد، اما می توانید کد منبع را برای مشاهده منتشر کنید. ما یک برچسب ایجاد کردیم که قالب‌بندی کد منبع را حفظ می‌کند و حتی برجسته‌سازی نحو را برای برخی از زبان‌ها ارائه می‌کند. مثال:

#دکمه (وزن قلم: پررنگ؛ حاشیه: 2px جامد #fff؛ )

برای به دست آوردن نتیجه ای مشابه قطعه بالا، کد خود را در این تگ ها قرار دهید:

کد شما

پارامتر "زبان" قوانین برجسته سازی زبان و نحو را تعریف می کند. مقادیر زیر پشتیبانی می شوند:

• اکشن اسکریپت 3
• سرد فیوژن
• شارپ
• دلفی
• ارلنگ
• fsharp
• شیاردار
• جاوا اسکریپت
• javafx
• متلب
• پاورشل
• پایتون
• اسکالا

اگر مقدار پارامتر "language" مشخص نشده باشد، از مقدار "text" استفاده می شود (بدون برجسته کردن نحو).
کد بین تگ‌های «کد» به‌طور خودکار برای نمایش کدگذاری می‌شود، بنابراین لازم نیست نگران عناصر HTML یا هر چیز دیگری باشید.

گزینه های پیکربندی

برچسب ها همچنین از بسیاری از گزینه های پیکربندی پشتیبانی می کنند که می توانید از آنها برای شخصی سازی ظاهر آنها استفاده کنید. استفاده از آنها کاملا اختیاری است.

• autolinks (درست/نادرست) - هر URL در کد به عنوان یک لینک نمایش داده می شود. مقدار پیش فرض: true
• collapse (true/false) - اگر روی true تنظیم شود، ناحیه کد هنگام بارگیری صفحه جمع می شود. برای گسترش آن، باید روی آن کلیک کنید. این برای قطعات بزرگ کد مفید است. حالت پیش فرض غلط است.
• خط اول (تعداد) - تعیین می کند که شماره گذاری خط از چه عددی شروع می شود. مقدار پیش فرض: 1.
• ناودان (درست/نادرست) - اگر روی نادرست تنظیم شود، شماره خطوط پنهان می شود. مقدار پیش فرض: true
• برجسته (اعداد جدا شده با کاما) - اعداد خطی که باید برجسته شوند، به عنوان مثال "4،7،19".
• hmtlscript (درست/نادرست) - اگر روی درست تنظیم شود، کد HTML/XML را برجسته می کند. این در هنگام انتشار کدهای ترکیبی، مانند PHP در داخل HTML مفید است. فقط با برخی از زبان ها کار می کند. مقدار پیش فرض: نادرست.
• نور (درست/نادرست) - اگر روی true تنظیم شود، اعداد خط و نوار ابزار پنهان می‌شوند. این در هنگام ارسال یک یا دو خط کد مفید است. مقدار پیش فرض: نادرست.
• padlinenumbers (true/false/integer) - به شما امکان می دهد تا اعداد خط را با صفر کنترل کنید. مقدار true تکمیل خودکار را تنظیم می کند، مقدار false تکمیل را غیرفعال می کند، عدد تعداد ثابتی از کاراکترها را برای شماره خطوط تعیین می کند.
• نوار ابزار (درست/نادرست) - اگر روی نادرست تنظیم شود، نوار ابزار با دکمه‌ها هنگام نگه داشتن ماوس روی کد ظاهر نمی‌شود. مقدار پیش فرض: true
• خطوط پیچی (درست/نادرست) - اگر روی نادرست تنظیم شود، بسته بندی خط غیرفعال می شود. اگر خطوط طولانی وجود داشته باشد، یک نوار اسکرول افقی ظاهر می شود.
• عنوان (رشته) - عنوان برای کد. می تواند در ترکیب با گزینه collapse مفید باشد.

نمونه هایی از استفاده از پارامترهای فوق:

این خط برجسته نشده است. این خط برجسته شده است. این خط برجسته شده است. این خط برجسته نشده است. این یک قطعه کد کوتاه با اعداد خط صفر تا حداکثر 4 کاراکتر است. //در این مثال، بسته بندی خط غیرفعال است. برای خواندن کل متن، باید از نوار اسکرول استفاده کنید. علاوه بر این، در این مثال، شماره گذاری خطوط غیرفعال است و نوار ابزار مخفی است.

و این یک قطعه کد بزرگتر است. در اینجا زبان PHP انتخاب شده و خط شماره 12 برجسته شده است.

مثال کد WordPress.com مثال کد WordPress.com این خط برجسته شده است. خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی زیاد این نمونه ای از تب های هوشمند است. WordPress.com

قدردانی
برای پیاده سازی این ویژگی از پروژه SyntaxHighlighter (نویسنده Alex Gorbatchev) استفاده شده است. کاربران می توانند مناسب را تنظیم کنند