حمله به پیشخوان وردپرس

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

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

function customAdmin() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/wp-admin.css" />'; 
}
add_action('admin_head', 'customAdmin');

خیلی ساده بخوام توضیح بدم، کار این تابع اینه که به ما اجازه میده تا با فراخوانی یک فایل CSS که من اینجا اون رو wp-admin نام گذاری کردم، به جای استایل پیشفرض وردپرس از کدهای سی اس اس اون فایل استفاده کنیم که جلوتر به اون هم می رسیم.

حالا تمام کار ما با اون فایل css خواهد بود، پس دست به کار شده و یک فایل با فرمت سی اس اس بسازید و در پوشه اصلی قالب بارگذاریش کنید.
* توجه: اگه نام یا محل ذخیره سازی دیگه ای رو برای این فایل در نظر دارید، حتما نسبت به تغییر نام و یا آدرس، در کد بالا اقدام کنید.

پس از انجام مرحله قبل، کار اصلی ما شروع میشه. یعنی استایل دهی و زیبا سازی مجدد وردپرس.
برای این کار، قبل از هر چیز ما باید با نام کلاس ها و آی دی های وردپرس و مهمتر از اون با css که بخش اصلیه کاره، آشنا باشیم. (در اینجا ما فرض می کنیم که شما پیش از این با css آشنایی دارید و به بقیه مراحل می پردازیم.)
حال، یک راه بدست آوردن نام این توابع اینه که تک تک فایل های php وردپرس رو که درپوشه wp-admin هست بررسی و نام توابع رو بدست بیاریم. (که این کار اصلا توصیه نمیشه!!!)
و دومین راه استفاده از یک قابلیت اساسی مرورگر گوگل کرومه. برای این منظور با این مرورگر به پیشخوان وردپرس متصل و سپس روی بخشی که قصد ویرایش اون رو دارید (مثلا یکی از منوها) راست کلیک کرده و گزینه inspect element رو انتخاب کنید. در ادامه، اول از هر چیز بر روان پاک دست اندر کاران گوگل کروم درودی بفرستید و سپس نام تمامی المان های مورد نظرتون رو به سادگی هرچه تمام تر پیدا کنید. 🙂

* بقیه ی مرورگرها هم همچین امکاناتی رو دارن، اما به شخصه گوگل کروم رو بیشتر توصیه میکنم.

به عنوان نمونه، در زیر من یک سری کد و دستور آماده کردم که میتونید با اضافه کردن اونها به فایل css بالا، شاهد یک سری تغییرات در پیشخوان باشید:

– تغییر فونت پیشفرض به یک فونت دیگر (مثلا بی یکان):

/* ---- wp-admin.css ------ */ .quicktags,.search,#wphead h1,.widefat th,.tablenav .displaying-num,.inline-edit-row fieldset span.title,.inline-edit-row fieldset span.checkbox-title,#your-profile legend,.pressthis a,#poststuff h3,.metabox-holder h3,.tool-box .title {font-family: "BYekan", Helvetica, Arial, sans-serif;}
/* ---- widgets.css ------- */ div.sidebar-name h3 {font-family: "BYekan", Helvetica, Arial, sans-serif;}
/* ---- press-this.css ---- */ body,.category-add input,.category-add select,.submit input,.button,.button-primary,.button-secondary,.button-highlighted,#postcustomstuff .submit input {font-family: "BYekan", Helvetica, Arial, sans-serif;}
/* ---- nav-menu.css ------ */ #menu-management .nav-tab {font-family: "BYekan", Helvetica, Arial, sans-serif;}
/* ---- media.css --------- */ .media-upload-form label.form-help,td.help,#media-upload p.help,#media-upload label.help,#gallery-settings .title,h3.media-title,h4.media-sub-title {font-family: "BYekan", Helvetica, Arial, sans-serif;}
/* ---- dashboard.css ----- */ #dashboard-widgets h4,#dashboard_right_now td.b,a.rsswidget,#dashboard_plugins h5 {font-family: "BYekan", Helvetica, Arial, sans-serif;}

– دستورات خام برای تغییر در منوهای مجاور:

#adminmenu {
}
#adminmenu .wp-submenu.sub-open, #adminmenu .wp-submenu-wrap {
}
#adminmenu li.wp-menu-open {
}
.fluency-hover-menus #adminmenu .wp-submenu ul {
}
#adminmenu .wp-submenu ul li a {
}
#adminmenu .wp-submenu ul li.wp-first-item a {
}
#adminmenu .wp-submenu ul li:last-child a {
}
#adminmenu a.menu-top {
	font-weight: normal;
}
#adminmenu .wp-submenu.fly-out, .folded #adminmenu .wp-submenu.fly-out {
}

– ویرایش بخش دیدگاه ها:

.dashboard-comment-wrap {
	padding-bottom: 4px;
}
#the-comment-list .comment-item .avatar {
	height: 40px;
	width: 40px;
}
.row-actions span a {
	background:#fff;
	border-style: solid;
	border-width: 1px;
	padding: 1px 4px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

–  تغییر تب های پیشخوان:

.postbox {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 20px 10px 20px 10px;
  margin-bottom: 20px;
  background: #f8f8f8;
}
.postbox .hndle {
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 3px 7px;
  font-size: 14px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
  -moz-border-radius: 4px 0 4px 0;
  border-radius: 4px 0 4px 0;
  line-height: 16px;
}
.postbox .handlediv {
  position: absolute;
  top: 2px;
  left: 0;
}
.postbox.closed .hndle {
  top: 0;
  right: 0;
}
.postbox h3 {
  font-size: 13px;
}

– استایل دهی به برخی از دکمه ها و ورودی ها:

.submitbox .submitdelete,
input.button-primary,
button.button-primary,
a.button-primary,
.button,
a.button,
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
.wrap .add-new-h2,
input.button,
input[type="file"].button,
input[type="image"].button,
input[type="submit"].button,
input[type="reset"].button,
input[type="button"].button {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #333;
  text-shadow: 0 1px 1px rgba(255,255,255,0.75);
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
  background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
  background-image: -o-linear-gradient(top,#fff,#e6e6e6);
  background-image: linear-gradient(to bottom,#fff,#e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe5e5e5', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  *background-color: #e6e6e6;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  border: 1px solid #ccc;
  *border: 0;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  *margin-left: .3em;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  width: auto;
  height: auto;
}
button.media-button.button-primary,
.wp-core-ui .button-primary,
a.button-primary.welcome-button,
input[type="submit"],
input[type="submit"].button-primary,
#side-sortables #mp-single-statuses span a,
input.button-primary,
button.button-primary,
input.button.button-primary,
a.button-primary {
	border-radius:15px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top,#08c,#0044cc);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0044cc));
  background-image: -webkit-linear-gradient(top,#08c,#0044cc);
  background-image: -o-linear-gradient(top,#08c,#0044cc);
  background-image: linear-gradient(to bottom,#08c,#0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0043cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  *background-color: #0044cc;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.plugins a.delete,
#all-plugins-table .plugins a.delete,
#search-plugins-table .plugins a.delete,
.submitbox .submitdelete,
.wrap .add-new-h2 {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: #da4f49;
  background-image: -moz-linear-gradient(top,#ee5f5b,#bd362f);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#bd362f));
  background-image: -webkit-linear-gradient(top,#ee5f5b,#bd362f);
  background-image: -o-linear-gradient(top,#ee5f5b,#bd362f);
  background-image: linear-gradient(to bottom,#ee5f5b,#bd362f);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  *background-color: #bd362f;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff !important;
}

امیدوارم که آموزش مفید بوده باشه.

تا درودی دیگر، بدرود…

منبع : دنیای وردپرس و برنامه نویسی