ویرایش کدهای HTML در وردپرس
آیا به دنبال راهی آسان برای ویرایش کدهای HTML در وبسایت وردپرسی خود هستید؟امروزه اکثر کاربران بعد از خرید هاست، اقدام به تاسیس وبسایت خود با سیستم مدیریت محتوای وردپرس می کنند و گاهی ممکن است نیاز به ویرایش کد های اچ تی ام ال با استفاده از ویرایشگر wordpress، داشته باشند.HyperText Markup Language یا همان HTML کدی است که به مرورگر می‌گوید چگونه محتوا را در صفحات وب نمایش دهد. ویرایش HTML برای سفارشی‌سازی پیشرفته و مشکلات عیب‌یابی مفید است. در این مقاله، نحوه ویرایش کد HTML در ویرایشگر وردپرس با استفاده از روش‌های مختلف به شما آموزش داده می‌شود.
- دلایل ویرایش کد اچ تی ام ال در wordpress
- آموزش edit کد های html در ویرایشگر کلاسیک وردپرس
- آموزش تغییر کد های اچ تی ام ال در ابزارک wordpress
- آموزش ویرایش کد های html در ویرایشگر تم وردپرس
- نحوه تغییر با استفاده از FTP
- افزونه Insert Headers and Footers
- جمع بندی
چرا باید HTML را در ورپرس ویرایش کنید؟
وردپرس ابزاری است که هزاران تم و افزونه را برای تغییر ظاهر وبسایت شما و سفارشی‌سازی عناصر مختلف بدون اینکه حتی یک خط کد بنویسید ارائه می‌دهد. با این حال، افزونه و تم‌ها محدودیت‌های خود را دارند و ممکن است مؤلفه‌های مورد انتظار شما را برآورده نسازند. در نتیجه، ممکن است نتوانید وبسایت خود را آنطور که می‌خواهید نمایش دهید. در اینجاست که ویرایش HTML واقعاً مفید خواهد بود و انعطافپذیری و کنترل زیادی را بر ظاهر و عملکرد سایت شما فراهم می‌آورد.
ایجاد بلوک html سفارشی
ابتدا، می‌توانید از یک بلوک HTML سفارشی در محتوای خود برای افزودن کد HTML استفاده کنید. برای شروع این کار ابتدا به داشبورد وردپرس خود بروید و سپس یک پست یا صفحه جدید را اضافه کنید یا یک مقاله موجود را ویرایش کنید. پس از آن، بر روی علامت بعلاوه (+) در گوشه سمت راست ستون چپ کلیک کنید و یک بلوک Custom HTML اضافه کنید.
درج کد در بلوک سفارشی
در مرحله بعد، کد html سفارشی خود را در بلوک وارد کنید. همچنین می‌توانید بر روی گزینه Preview کلیک کنید تا بررسی کنید که آیا کد html به درستی کار می‌کند و محتوای شما در وبسایت به صورت زنده چگونه نمایش داده می‌شود.
روش دیگر برای افزودن و یا تغییر کد HTML در ویرایشگر بلوک وردپرس، ویرایش HTML در یک بلوک خاص است. برای انجام این کار، کافی است که یک بلوک موجود در محتوای خود را انتخاب کرده و سپس روی منوی سه نقطه کلیک کنید. در مرحله بعد، بر روی گزینه Edit as HTML کلیک کنید.
اکنون کد HTML را در یک بلوک جداگانه مشاهده خواهید کرد. پیش بروید و کدهای HTML خود را ویرایش کنید. به عنوان مثال، می‌توانید یک لینک nofollow اضافه کنید، سبک متن خود را تغییر دهید یا کد دیگری را اضافه کنید.
استفاده از Code Editor
اگر قصد دارید تا کدهای HTML کل پست خود را ویرایش کنید، می‌توانید از Code Editor در ویرایشگر بلوک وردپرس استفاده کنید. با کلیک بر روی گزینه سه نقطه در گوشه سمت راست بالا، می‌توانید به ویرایشگر کد دسترسی پیدا کنید. سپس Code Editor را از بین گزینه‌های کشویی انتخاب کنید.
نحوه ویرایش کدهای HTML در ویرایشگر کلاسیک وردپرس
اگر از ویرایشگر کلاسیک وردپرس استفاده می‌کنید، می‌توانید به راحتی HTML را در نمای TEXT ویرایش کنید. برای دسترسی به نمای TEXT، کافی است یک پست وبلاگ را ویرایش کنید یا یک پست جدید اضافه کنید. وقتی در ویرایشگر کلاسیک هستید، بر روی تب TEXT کلیک کنید تا HTML مقاله خود را ببینید.
پس از آن می‌توانید کدهای HTML محتوای خود را ویرایش کنید. به عنوان مثال، می‌توانید کلمات مختلف را BOLD کنید یا اینکه از سبک italic استفاده کنید، لیست ایجاد کنید و فهرست مطالب جدید اضافه کنید و بسیاری دیگر از موارد را تغییر دهید و یا اضافه کنید.
نحوه ویرایش کدهای HTML در ابزارک وردپرس
آیا می‌دانستید که می‌توانید کد HTML را در قسمت ویجت سایت خود اضافه و یا ویرایش کنید؟ در وردپرس، استفاده از Custom HTML widget می‌تواند به شما در سفارشی کردن سایدبار، فوتر و سایر مناطق ویجت کمک کند. به عنوان مثال، می‌توانید فرم‌های تماس، Google Maps، دکمه‌های فراخوان (CTA)، و سایر محتواها را جاسازی کنید.
Appearance
برای این کار می‌توانید به پنل مدیریت وردپرس خود رفته و سپس به بخش Appearance ویجت بروید. پس از آن می‌توانید، با کلیک بر روی دکمه ADD، یک ویجت Custom HTML اضافه کنید.
در مرحله بعد، باید مکانی را که می‌خواهید ویجت سفارشی HTML را اضافه کنید را انتخاب کنید. ناحیه ویجت به موضوع وردپرس شما بستگی دارد. به عنوان مثال، ممکن است بتوانید آن را به پاروقی، سرصفحه یا دیگر نواحی اضافه کنید.
پس از انتخاب ناحیه و موقعیت ویجت، بر روی دکمه Save Widget کلیک کنید.
اکنون می‌توانید برای مشاهده ویجت Custom HTML از سایت خود دیدن کنید.
نحوه ویرایش HTML در ویرایشگر تم وردپرس
راه دیگر برای ویرایش HTML در وبسایت، از طریق ویرایشگر قالب وردپرس (Code Editor) است. با این حال، توصیه نمی‌کنیم که کد را مستقیماً در ویرایشگر تم ویرایش کنید. کوچکترین اشتباه در هنگام وارد کردن کد می‌تواند وبسایت شما را خراب کرده و مانع دسترسی شما به داشبورد وردپرس بشود. همچنین، اگر تم خود را بروز کنید، همه تغییراتی را که ایجاد کرده اید از بین می‌رود. با این اوصاف، اگر به ویرایش HTML با استفاده از ویرایشگر تم فکر می‌کنید، بهتر است قبل از ایجاد هر گونه تغییری از وبسایت خود پشتیبان تهیه کنید.
Theme Editor
در مرحله بعد، به قسمت Appearance » Theme Editor داشبورد وردپرس خود بروید. اکنون پیام هشداری مبنی بر ویرایش مستقیم فایل‌های تم خود خواهید دید.
هنگامی‌که شما بر روی دکمه I Understand کلیک کردید، فایل‌ها و کد موضوع خود را مشاهده خواهید کرد. از اینجا، می‌توانید فایل مورد نظر خود را برای ویرایش انتخاب کرده و تغییرات خود را انجام دهید.
نحوه ویرایش HTML در وردپرس با استفاده از FTP
یکی دیگر از روش‌های ویرایش کدهای HTML در فایل‌های تم وردپرس، استفاده از FTP است که به عنوان سرویس پروتکل انتقال فایل نیز شناخته می‌شود. این یک قابلیت استاندارد است که با همه اکانت‌های هاستینگ وردپرس ارائه می‌شود. مزیت استفاده از FTP به جای ویرایشگر کد این است که می‌توانید به راحتی مشکلات را با استفاده از سرویس گیرنده FTP برطرف کنید. به این ترتیب، اگر هنگام ویرایش HTML چیزی خراب شد، از ورود به داشبورد وردپرس خود منع نخواهید شد.
استفاده از نرم افزار FTP
برای شروع، ابتدا باید یک نرم افزار FTP را انتخاب کنید. ما در این آموزش از FileZilla استفاده می‌کنیم، زیرا یک سرویس گیرنده FTP رایگان و کاربرپسند برای Windows، Mac و Linux است. پس از انتخاب سرویسگیرنده FTP، اکنون باید وارد سرور FTP سایت خود بشوید. می‌توانید اطلاعات ورود به سیستم را از داشبورد کنترل‌پنل ارائه دهنده هاستینگ خود بیابید. پس از ورود به سیستم، پوشه‌ها و فایل‌های مختلف وبسایت خود را در زیر ستون Remote site خود بیابید. به قسمت فایل‌های تم از طریق wp-content » theme بروید. اکنون موضوعات مختلفی را در وبسایت خود مشاهده خواهید کرد. موضوعی را که می‌خواهید ویرایش کنید را انتخاب کنید.
view/edit
در مرحله بعد، می‌توانید بر روی یکی از فایل‌های تم راست کلیک کنید تا بتوانید HTML را ویرایش کنید. برای مثال، اگر می‌خواهید تغییراتی را در پاروقی ایجاد کنید، روی فایل footer.php راست کلیک کنید. بسیاری از کلاینت‌های FTP به شما این امکان را می‌دهند که فایل خود را مشاهده و ویرایش کنید و پس از ایجاد تغییرات، آنها را به طور خودکار آپلود کنید. در FileZilla، می‌توانید این کار را با کلیک بر روی گزینه View/Edit انجام دهید.
تهیه نسخه بک آپ
با این حال، پیشنهاد می‌کنیم که قبل از هرگونه تغییری، فایلی را که می‌خواهید ویرایش کنید را بر روی دسکتاپ خود دانلود کنید. پس از ویرایش HTML، می‌توانید فایل اصلی را جایگزین کنید. برای جزئیات بیشتر، توصیه می‌کنیم تا راهنمای ما در مورد نحوه استفاده از FTP برای بارگذاری فایل‌ها در وردپرس را بخوانید و دنبال کنید.
راهی آسان برای اضافه کردن کد در وردپرس
ساده‌ترین راه برای افزودن کد به وردپرس استفاده از افزونه وردپرس Insert Headers and Footers می‌باشد. تیم WPBeginner این افزونه را طراحی کرده است، بنابراین در چند دقیقه براحتی می‌توانید کد خود را به سایت اضافه کنید. همچنین به سازماندهی کدهای شما کمک می‌کند، زیرا در یک مکان ذخیره شده است. بعلاوه، از خطاهایی که هنگام ویرایش دستی کدها ایجاد می‌شوند جلوگیری می‌کند. مزیت دیگر این است که اگر تصمیم به روز رسانی و یا تغییر سایت خود دارید نیازی به نگرانی در مورد پاک شدن کدهای خود نخواهید داشت.
فعال سازی افزونه Insert Headers and Footers
اولین کاری که لازم است این است که افزونه Insert Headers and Footers را در وبسایت خود نصب و فعال‌سازی کنید. در مرحله بعد، می‌توانید کد Html را در باکس‌های Header، Body، Footer به وبسایت خود اضافه کنید. برای مثال، فرض کنید می‌خواهید alert bar را در وبسایت خود نمایش دهید. به سادگی می‌توانید کد HTML را در کادر Scripts in Body وارد کرده و روی دکمه ذخیره کلیک کنید.علاوه بر این، می‌توانید کد رهگیری Google Analytics و پیکسل فیسبوک را در هدر اضافه کنید یا یک دکمه Pinterest را در پاورقی وبسایت خود با استفاده از افزونه اضافه کنید.
جمع بندی
ویرایش کد های html در وردپرس، قابلیتیست که اگر با آن آشنا نباشید، ممکن است به ساختار وبسایت شما ضربه بزند و باعث ایجاد تغییرات نا خوشایندی در قالب سایت شما بشود.با استفاده از روش هایی که در این مقاله بررسی کردیم، می توانید به راحتی تغییرات دل خواه خود را در سایت های وردپرسی اعمال کرده و نتیجه آن را در سریع ترین زمان، مشاهده کنید.
