امن سازی وردپرس توسط .htaccess
وردپرس یکی از بهترین سیستم های مدیریت محتوا می باشد که دارای مشکلات امنیتی فراوانی می باشد که در صورت که این مشکلات امنیتی در سایت راه اندازی شده توسط وردپرس رفع نگردد سایت دچار مشکلات جدی امنیتی خواهد گردید. بهتر است که قبل از آنکه برای سایت شما مشکلات جدی به وجود آید و برای بازگردانی سایت خود به حالت اول با شرکت هاستینگ خود تماس بگیرید وردپرس خود را امن سازی نمایید. راه های بسیاری برای امن سازی وردپرس وجود دارد و استفاده از .htaccess برای امن سازی یکی از آن روش ها می باشد.
پیکربندی .htaccess
.htaccess فایل تنظیمات می باشد که به شما این امکان را می دهد تنظیمات سرور را برای دایرکتوری های خاصی تغییر دهید.
به دو روش می توانید به آن دسترسی داشته باشید:
- پیدا کردن آن در فلدر اصلی وب سایت
- ویرایش آن با استفاده از پلاگین سئو وردپرس به نام Yoast
در این فایل کدی به شکل زیر وجود دارد:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
برای آنکه امنیت وردپرس خود را بالا ببرید می بایست کدهای زیر را در آن اضافه نمایید.
امن سازی wp-config.php
برای امنیت فایل تنظیمات wp-config.php وردپرس کد زیر را به آن اضافه نمایید:
order allow,deny
deny from all
</files>
جلوگیری از لیست فایل های درون دایرکتوری
توسط کد زیر می توانید جلوی لیست کردن فایل های درون دایرکتوری ها را بگیرید:
Options All -Indexes
غیر فعال نمودن Hotlinking
Hotlinking به عملیات خواندن تصاویر و فایل ها توسط سرورهای دیگر می گویند که با استفاده از این کد می توانید امکان این کار را غیر فعال نمایید:
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?YourDomain [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]
توجه نمایید نام دامنه خود را به جای YourDomain قرار دهید.
محافظت از فلدر /wp-content
وردپرس تمامی فایل های مدیای خود را در فلدر /wp-content نگهداری می نماید و این فلدر هم چنین جایی می باشد که فایل های قالب و پلاگین ها در آن ذخیره می گردند. بهتر است دسترسی به فایل ها .php را در این فلدر ببندید. برای انجام این کار می بایست فایل .htaccess جداگانه ایجاد نمایید و آن را بر روی این فلدر بارگذاری نمایید. و برای خوانده شدن فقط فایل ها مدیا در این فلدر کد زیر را به فایل .htaccess این فلدر اضافه نمایید:
deny from all
<files ~ ".(xml|css|jpe?g|png|gif|js)$">
allow from all
</files>
با انجام این کار هم اکنون سایت شما به صورت کامل امن سازی شده و تنها یک کار دیگر باقی مانده و آن امن سازی خود فایل .htaccess و دسترسی به آن می باشد.
محدود کردن دسترسی به .htaccess
امن سازی وردپرس توسط فایل .htaccess به پایان رسید هم اکنون می بایست دسترسی به فایل .htaccess را محدود نماییم و برای انجام این کار می بایست از کد زیر استفاده شود. این کد دسترسی به کلیه فایل هایی که با HTA شروع می شود را می بندد.
order allow,deny
deny from all
satisfy all
</files>
برای امنیت وردپرس به شما توصیه می شود به روز رسانی وردپرس را به صورت دائم انجام دهید و همیشه آخرین نسخه از وردپرس را بر روی سرور خود داشته باشید و همچنین از نصب پلاگین های اضافی در وردپرس خودداری نمایید. سرور نیز در امنیت وردپرس شما موثر است پس بنابراین سروری تهیه نمایید که معمولا از آن برای هاست وردپرس استفاده می گردد. در صورتی که در سایت وردپرسی خود از پلاگین خاصی استفاده می نمایید حتما تنظیمات امنیتی آن پلاگین را بررسی و اعمال نمایید.
کد Css جهت انیمیشن کردن باکس
در سایت های امروزه برخی از کارهای انیمیشن در سایت رو میشه با کدهای Html5 و Css3 نوشت که برای مثال عکس بالا توسط css دور باکس ها به صورت انیمیشن درست شده و ترتیب درست کردن آنرا توضیح میدهیم,
برای اینکه در سایت بتونیم باکس های Shadow درست کنیم, که وقتی Hover میکنیم روی باکس, و دور باکس به صورت انیمیشن و سایه های رنگی به وجود بیاریم از کدهای زیر استفاده نمایید :
کد Css :
*{
padding:0;
margin:0;}
#master {
/* [disabled]background-color: #F00; */
height: 895px;
width: 980px;
position: relative;
margin: 0 auto;
}
#apDiv1 {
position: absolute;
left: -51px;
top: -1px;
width: 981px;
height: 131px;
z-index: 1;
}
#apDiv2 {
position: absolute;
left: 296px;
top: 68px;
width: 612px;
height: 42px;
z-index: 2;
}
#apDiv2 ul li {
list-style-type: none;
float: left;
display: block;
/* [disabled]background-color: #666; */
height: 42px;
width: 102px;
text-align: center;
line-height: 42px;
font-family: verdana;
font-size: 12px;
}
.menu1 {
background-color: #C61211;
}
.menu2 {
background-color: #FC6B00;
}
.menu3 {
background-color: #9BCA00;
}
.menu4 {
background-color: #0BAAD4;
}
.menu5 {
background-color: #CB3187;
}
.menu6 {
background-color: #F79D00;
}
#master #apDiv2 ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
#apDiv3 {
position: absolute;
left: 491px;
top: 18px;
width: 300px;
height: 26px;
z-index: 3;
background-color: #1B1C1E;
transition: all 0.5s;
}
.search:hover{box-shadow:0px 0px 30px #FFFFFF; }
.search{ width: 300px;
height: 24px; background-color: #1B1C1E; border:0px; color:#FFF;}
#apDiv4 {
position: absolute;
left: 809px;
top: 17px;
width: 101px;
height: 25px;
z-index: 4;
font-family: verdana;
font-size: 12px;
line-height: 25px;
font-weight: bold;
color: #FFF;
background-color: #1B1C1E;
text-align: center;
cursor:pointer;
transition: all 0.5s;
}
#apDiv4:hover{
box-shadow:0px 0px 30px #FFFFFF;}
body {
background-color: #000;
}
کد html :
<div id="master">
<div id="apDiv1"></div>
<div id="apDiv2">
<ul>
<li class="menu1">Item1</li>
<li class="menu2">Item2
<ul>
<li class="menu1">Sub Item 1</li>
<li class="menu2">Sub Item 2</li>
<li class="menu3">Sub Item 3</li>
</ul>
</li>
<li class="menu3">Item3</li>
<li class="menu4">Item4</li>
<li class="menu5">Item5</li>
<li class="menu6">Item6</li>
</ul>
</div>
<div id="apDiv3"><input class="search" value="search..." type="text" /></div>
<div id="apDiv4">Search</div>
</div>