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

دسته‌ها : آموزش, هک ها و کدها علی میرزائی 22 دیدگاه‌ها

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

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

خوب، در ابتدای کار لازمه تا قطعه کد زیر رو در توابع پوسته (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;
}

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

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

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

دیدگاه کاربران در مورد این نوشته

  1. با سلام.
    از قالب sahifa استفاده می کنم و وقتی به فانکشن دست میزنم دیگه کلا سایت بالا نمیاد.
    چیکار باید بکنم

    توسط ahmad پاسخ

  2. سلام صفحه پیشخوان سایت که ساختم نصفه نمایش داده می شود و برای ایجاد تغییرات دچار مشکل می شوم چون کل صفحه نمایش داده نمی شود چکار کنم که بتونم کل صفحه پیشخوان را ببینم؟

    توسط محمد پاسخ

  3. چجوری میشه wp-menu-separator رو از منوی وردپرس حذف کرد؟ منظورم فاصله ایه که بین منو ها میندازه مثلا فاصبه بین پیشخوان و نوشته
    لطفا جوابو برام ایمیل کنید

    توسط امین پاسخ

  4. هک بود این؟؟؟

    توسط حمید پاسخ

    1. بله، واژه هک که همیشه به معنی نفوذ به یک سیستم و از کار انداختن اون نیست! به بعضی فیلترگذاری ها در هسته وردپرس هم هک گفته میشه. :)

      توسط علی میرزائی پاسخ

  5. سلام .میخواستم بدونم میشه یک تب موجود در پیشخوان رو حذف کرد ؟

    توسط amir پاسخ

    1. سلام، دقیقتر توضیح بدید تا راهنماییتون کنم.

      توسط علی میرزائی پاسخ

  6. با تشکر فراوان از لطف شما کمتر سایتی پیدا میشه مدیر به نظرات اینگونه اهمیت دهد !
    میشه لطف کنید فایل را ویرایش کنید ؟ اخه میترسم کاری کنم کل وردپرسم خراب بشه لطفا ان را ویرایش کرده و یا به میلم بفرستید و یا اینجاآپلودش کنید

    توسط سامی پاسخ

    1. خواهش میکنم،
      نه هیچ مشکلی پیش نمیاد، برای اطمینان میتونید از محتوای این فایل “بک آپ” بگیرید.
      فقط اون رشته WordPress رو به همراه کد خط فاصله کناریش حذف و تغییرات رو ذخیره کنید.
      موفق باشید.

      توسط علی میرزائی پاسخ

  7. سلاو و با تشکر از پاسخ شما اما من زیادی اماتورم و اون فایلو باز کردم اصلا وردپرس فارسی توش نبود تا ویرایشش کنم منظورتان را متوجه نشدم؟؟؟ میشه بیشتر و ساده تر راهنمایی کنید؟

    توسط سامی پاسخ

    1. واژه وردپرس فارسی، در فایل زبان برای این رشته مشخص شده. با حذف عبارت “— WordPress”، مشکلتون حل میشه.

      توسط علی میرزائی پاسخ

  8. سلام واقعا جالب بود و تشکر از شما
    امیدوارم نظر مرا پاسخ دهید چون پاسخ به این نظر خیلی برام مهمه
    وقتی وارد پیشخوان میشیم در بالای مرورگر نوشته پیشخوان “عنوان سایت” وردپرس فارسی
    حالا من چطور اون وردپرس فارسی رو تغییر بدم؟

    توسط سامی پاسخ

    1. سلام،
      یه راه ساده برای این کار اینه که به فایل admin-header.php (در پوشه wp-admin ) برید و خطوط 32 و 34 رو ویرایش کنید.

      توسط علی میرزائی پاسخ

  9. خیلی جالب بود ، مرسی 😀

    توسط Mani پاسخ

  10. جالب بود.

    توسط آموزش برنامه نویس اندروید پاسخ

  11. اقای علی میرزائی با تشکر موضوعی را متوجه شدم قالب من قالب خبری صحیفه از شرکت تم فورست هست و اگر ویرایش شود کل قالب بهم می ریزد هرکاری که شما گفتید را انجام دادم و قالبم بهم ریخت و ان را دوباره نصب کردم باتشکر از پاسخگویی خوبتان—————————–

    توسط سید شهاب الدین نجم الساداتی یزدی پاسخ

  12. آقای علی میرزائی وقتی می خواهم دستور سی اس اس اول خط اول را به wp-admin.css
    وارد کنم دایرکت ادمین خطا می دهد و وقتی می خواهم از Functions.php استفاده کنم قالب خطا می دهد الان چه باید بکنم؟
    با تشکر از پاسخگویی و پشتیبانی عالی شما………………………

    توسط سید شهاب الدین نجم الساداتی یزدی پاسخ

    1. پس شما کد پی اچ پی فانکشن رو قرار ندادید؟
      ببینید اون کد باید داخل دستور php قرار بگیره، شما واسه راحتی این کد رو در اولین خط کدهای فانکشن بعد از php?> قرار بدید.
      اگه درست نشد محتوای فایل فانکشن رو برام بفرستید تا راهنماییتون کنم کد رو کجا بذارید!

      توسط علی میرزائی پاسخ

  13. اقای علی میرزائی با تشکر از مطلب خوبتان اما چگونه می توانم فونت پیشفرض وردپرس را تغییر بدم ؟ من مبتدی هستم اگر ممکن است بیشتر توضیح دهید

    توسط سید شهاب الدین پاسخ

    1. سلام، اولین دستور سی اس اس معرفی شده مربوط به تغییر فونته، حالا شما کجاش مشکل دارید؟

      توسط علی میرزائی پاسخ

  14. عالیه! خودتون هم استفاده کردید؟ میشه یه اسکرین شات بدید تا نتیجه معلوم شه؟
    راستی اینجور چیزها رو توی وردپرس پارسی هم بذار تا باخبر شیم، با تشکر

    توسط احمد پاسخ

    1. واقعیتش سایت من چندکاربره نیست که بخوام سفارشیش کنم و به نظرم همینجوری هم وردپرس به اندازه ی کافی جاذّابیت داره :) فقط برای تست، تو فضای لوکال برخی از دستورات رو امتحان کردم.
      * اینم بگم که برای یه تغییر عمده و چشمگیر باید وقت و زمان زیادی گذاشته بشه.
      —————
      والا به خاطر بحث ایندکس و گوگله که نمیذارم، اگه امکان لینک مستقیم رو در انجمن یا سایت اصلی بذارن که استقبال هم میکنم.

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید