رفتن به مطلب

قرار دادن آیکون به صورت sprite بین نوشته ها در وردپرس


پست های پیشنهاد شده

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

من میخواستم تو سایتم یک بین یکسری از نوشته آیکون های کوچک قرار بدم

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

تصویری خود سایت به صورت پیشفرض به این شکل هست :

8286_001.jpg

تصویری که میخوام به این شکل در بیاد این هست :

d5211_002.jpg

این آدرس سایتمه : www.zoobino.com

ویرایش شده توسط fantome0
لینک به ارسال

من برای اینکار همیشه با ul , li کار میکنم ، بعدش بهشون خاصیت display:inline میدم و برای هر کدوم با خاصیت background-image عکسی رو کنارش قرار میدم

اگر با ul آشنایی ندارید :


http://www.w3schools.com/tags/tag_ul.asp

و بک گراند :


http://www.w3schools.com/cssref/pr_background-image.asp

لینک به ارسال

برای دسته و پاسخی بگذارید؟

باید در مرحله اول کلاس آنها را بدانید برای اینکار از صفحه سورس کد بگیرید و محل مورد نظر را بخوانید ما فرض می گیریم اینگونه باشد


<div class="category">دسته: <a href="...">نام دسته</a></div>
<ol class="commentlist">
<h3>پاسخی بگدذارید</h3>

آیکونها را به پوشه images در قالب منتقل کرده و در کدهای style..css وارد می کنید


.category {
display:block;
width:auto;
padding:2px 45px 2px 5px;
background:#eee url('images/icon1.png') no-repeat scroll right center;
border:1px #aaa solid;
}
.commentlist h3 {
display:block;
width:auto;
padding:2px 45px 2px 5px;
background:#eee url('images/icon2.png') no-repeat scroll right center;
border:1px #aaa solid;

}

به نظر می آد قالبتون آرتیستر باشه در اینصورت کدهاتون به این ترتیبه

کلاس لایه زیر نام سایت

art-PostMetadataHeader

کلاس بخش دسته بندی ها

art-PostMetadataFooter

و برای پاسخی بگذارید هم از آی دی

comments

به صورت h3#comments استفاده کنید

لینک به ارسال

من تمام آیکون ها رو از طریق سایت sprite یکی کردن و میخواستم از این طریق بزارم

این خاصیت که میفرمائید نمیدونم چجوری تو سایت قرار بدم.

خاصیت border هم نمیخوام بدم فقط واسه این که میخواستم بهتر منظورم بگم دور قسمت های مورد نظر با خط قرمز کادر کشیدم.

امکانش هست شما زحمت ادیت این کد رو انجام بدید؟

ممنون

ویرایش شده توسط fantome0
لینک به ارسال

فایل sprite را بگذارید یا مختصات دقیق محل هر آیکون را بگویید

یا اگر می توانید بفرمایید تا کد حالت کلی این روش را بگذارم خودتان اصلاح کنیید

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

لینک به ارسال

نیازی نداره واسه تغییرتی که میفرمائید تغییراتی تو کد های php بدم ؟

من فایل عکس و کدهاشونو ضمیمه کردم

فایل اصلی css و php های مربوطه رو اگه نیاز ببیند براتون ارسال کنم؟

من فکر میکنم باید یه تغییرات جزئی هم تو کدهای php داده بشه.

قالب هم اختصاصی طراحی شده و با برنامه آرتیستر طراحی نشده

ممنون

sprite pic and css.zip

ویرایش شده توسط fantome0
لینک به ارسال

یکبار به نام zoobin برایم ارسال کذردید درسته؟

قالب در پایه با آرتیستر ساخته شده و روش تغییرات حرفه ای انجام گرفته من جمله تغییر نام کلاس ها ولی کدهای اضافی همان است که هست

کدهاتون که درسته باید در هر بخش لایه مربوطه را به صورت


<span class="CLASSNAME">  </span>

اضافه کنید و بهتر است به تمام کدهای sprite.css خاصیت display:inline-block را هم بیافزایید

لینک به ارسال

یکبار به نام zoobin برایم ارسال کذردید درسته؟

قالب در پایه با آرتیستر ساخته شده و روش تغییرات حرفه ای انجام گرفته من جمله تغییر نام کلاس ها ولی کدهای اضافی همان است که هست

کدهاتون که درسته باید در هر بخش لایه مربوطه را به صورت


<span class="CLASSNAME">  </span>

اضافه کنید و بهتر است به تمام کدهای sprite.css خاصیت display:inline-block را هم بیافزایید

بله قبلا قالب رو به ایمیلتون ارسال کردم.

من به تمام قسمت های php که مربوط به این بخش هاست رو این کدی که میفرمائید رو باید اضافه کنم ؟

میشه لطفا یک مثال بزنید.

ممنون میشم اگه شما این بخش هارو کدش درست کنید ، چون فکر کنم کدها رو خراب کنم یا نتونم درست انجام بدم

لینک به ارسال

با کلی گشت و گذار تو کدای سایت بالاخره قسمت های مورد نظر برای ادیت رو پیدا کردم:

بالای پست قسمت : تاریخ : 13 دی 1391|نویسنده : admin|بازدید : 23|بدون دیدگاه

کد css :


.post-meta{padding-bottom:12px;overflow:hidden;}
.post-meta li{padding:0 6px;line-height:18px;float:right;background:url(images/separator2.png) left center no-repeat;}
.post-meta li a{color:#000;}
.post-meta li a:Hover{text-decoration:underline;}
.post-meta .comment{color:#c20000;}

کد php :


<ul class="post-meta">
<li>تاریخ : <?php the_date('j F Y');?></li>
<li>نویسنده : <?php the_author_posts_link();?></li>
<li>بازدید : <?php $post_views=get_post_custom_values("post-views"); echo $post_views[0];?></li>
<li class="comment"><?php comments_popup_link('بدون دیدگاه','یک دیدگاه','% دیدگاه','دیدگاه بسته');?></li>
</ul>

----------------------------------------------------------

بخش دسته بندی در پایین پست :

کد css :


.category{overflow:hidden;padding-bottom:12px;float:right;margin:5px 0 0 7px;}

کد php :


<div class="category"> <span>دسته :</span> <?php the_category('');?></div>

--------------------------------------------------------

بخش کامنت ها :

کد css :


#respond h3{margin-bottom:12px;height:39px;}
#respond h3 span{color:#9E0000;display:block;padding-right:10px;line-height:33px;font-size:18px;clear:both;}

کد php :


<div id="respond">
<h3><span><?php comment_form_title( 'پاسخی بگذارید', 'ارسالی پاسخی برای %s' ); ?></span></h3>

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

ممنون

لینک به ارسال

یک کم صبور باشید باور کنید من گاهی می خوابم و گاهی در مسیر محل کار و منزلم ولی بافقیش را در خدمت دوستان

شمتا جمعا هفت تا عکس را یکی کردید ؟

من فکر کردم دویست تایی هست

اول فایل sprites.css را باز کنید و دو خط اولش را به این گونه اصلاح کنید


.icon-bgwww, .icon-swswbg, .icon-bqqqag, .icon-bg.pcccvng, .icon-bg, .sxxxzbg, .ic2525on-bg{
background: url(sprites.png) no-repeat;
}

تبدیل شود به


.icon-bgwww, .icon-swswbg, .icon-bqqqag, .icon-bg.pcccvng, .icon-bg, .sxxxzbg, .ic2525on-bg{
background: url(sprites.png) no-repeat;
display:inline-block;
}

حالا این هفت خط کد را به هفت محلی که عرض می کنم ببرید


<span class="icon-bgwww"> </span>
<span class="icon-swswbg"> </span>
<span class="icon-bqqqag"> </span>
<span class="icon-bg.pcccvng"> </span>
<span class="icon-bg"> </span>
<span class="sxxxzbg"> </span>
<span class="ic2525on-bg"> </span>

  1. تاریخ
  2. نویسنده
  3. یکی از عکس ها شبیه چشمه نمی دونم برای چیه
  4. دیدگاه
  5. دسته بندی
  6. دیدگاه دوباره ولی بزرگتر از قبلی
  7. باز هم نویسنده بزرگتر قبلی

خوب هفت تا کد را باید به قبل از نوشته ی هفت محل مربوطش در تمام صفحات

index.php

category.php

archives.php

single.php

page.php

یا هر صفحه ی دیگه ای که می بینید کد مشابه داره منتقل کنید

-------

این همه اتلاف وقت و انرژی در مقابل بهینه کردن هفت تا دونه آیکون یعنی حداکثر 0.01 % از سئوی سایت و حداکثر 1% تاثیر در لود اگر فکر می کنید می ارزه انجام بدید و احتمالا در اولین مرحله آیکونها باز سرای اصلی نیستند و باید در محل که قرار گرفتند یک کم جاباشون کرد

راستی این کد را هم به header.php اضافه کنید


<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/sprites.css" type="text/css">

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

لینک به ارسال

استاد فخار

من راستش خواستم این هست که همین کارها رو که شما گفتین رو طوری انجام بدم که دیگه نیاز نباشه برای لود سایت 2 تا فایل css لود بشه . و کدها رو خواستم یه جوری تو همون css اولی جا بدم ولی هر کار میکنم و هر تغییری ایجاد می کنم اصلا هیچ اتفاقی نمیوفته انگار نه انگار تغییراتی دادم . لطفا اگر امکان داره فایل CSS رو و یا فایل PHP مربوط رو خدمتتون بدم شما یه نگاهی بهش بندازید؟

بسیار سپاسگذارم

لینک به ارسال

فرقی نداره کدها را کپی کنید در style.css فقط عکس ساخته شده را با فایل css کنار هم باشند و دیگه به زیر پوشه images کاری ندارید یا باید در کدها آدرس عکس تغییر کنه

لینک به ارسال

فرقی نداره کدها را کپی کنید در style.css فقط عکس ساخته شده را با فایل css کنار هم باشند و دیگه به زیر پوشه images کاری ندارید یا باید در کدها آدرس عکس تغییر کنه

من فکر میکنم مشکل اساسی که من بهش مواجه شدم مربوط به فایل های php هستش که باید تغییراتی بدم البته کدی که شما لطف کردین دادین رو هم گذاشتم ولی نتیجه ای نگرفتم. کاش میتونستین یک نگاهی بندازین به قالب سایت

لینک به ارسال

منظورتون رو از نتیجه نگرفتن واضح تر بیان کنید

ببینید نگاه به سایت شما نتیجه ای نمی ده چون در سایت کدهای php اجرا می شوند و نتایج مشخص می گردد نه فرایند اتفاق افتاده اگر شما واضح مشکلتان را مطرح کنید و جدی تر پشتش را بگیرید مشکلتون همین امشب حل می شه

گاهی اوقات آنقدر فاصله بین پاسخ شما به پاسخ من هست من یادم می ره که اصلا موضوع تایپیک چی بوده

لینک به ارسال

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

من اگر امکان داره براتون مشخصات cpanel رو ارسال کنم تا شما بی زحمت یه نگاهی بکنید

لینک به ارسال

لطف کنید این رو بخونید من امشب خیلی سخت و با اختلال ان لاینم و در این شرایط برای کارهای خودمم جرات نمی کنم برم روی cpanel چون ممکنه یک دفعه یک قطعی بی موقع کلی از اطلاعات را پاک کنه بدون اینکه متوجه بشم

لینک به ارسال

ممنون از راهنمایی تون

من مطلبی که فرمودین رو مطالعه کردم

هر بار کش مرورگر رو پاک میکنم و سایت رو با ctrl+f5 لود میکنم تا از کش مرورگر استفاده نشه

به علاوه من از cloudflare استفاده می کنم و بعد از تغیرات قبل از اینکه صفحه رو رفرش کنم از پنل اونجا هم کش رو پاک می کنم. و بعید میدونم مشکل عدم تغییرات واسه کش باشه چون تغییرات دیگه به درستی اعمال میشه و مشاهده میشده ولی این تغییرات کد اصلا تو سورس تغییری نمیکنه. حدس من اینه که شاید نیاز باشه تغییرات دیگری نیاز باشه واسه همین به نظرم شما سورس سایت رو ببینید بهتر متوجه میشید موضوع از چه قراره

ممنون

لینک به ارسال

ممنون از راهنمایی تون

من مطلبی که فرمودین رو مطالعه کردم

هر بار کش مرورگر رو پاک میکنم و سایت رو با ctrl+f5 لود میکنم تا از کش مرورگر استفاده نشه

به علاوه من از cloudflare استفاده می کنم و بعد از تغیرات قبل از اینکه صفحه رو رفرش کنم از پنل اونجا هم کش رو پاک می کنم. و بعید میدونم مشکل عدم تغییرات واسه کش باشه چون تغییرات دیگه به درستی اعمال میشه و مشاهده میشده ولی این تغییرات کد اصلا تو سورس تغییری نمیکنه. حدس من اینه که شاید نیاز باشه تغییرات دیگری نیاز باشه واسه همین به نظرم شما سورس سایت رو ببینید بهتر متوجه میشید موضوع از چه قراره

ممنون

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

راستی من اسمم ایمان فخاره

استاد جزو گروه های کاربری سایته که لطف مدیران شاملش شده مثل شما که الان در گروه عضو سایت هستید

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...