Новичок
Группа: User
Сообщений: 16
Регистрация: 25.10.2012
Из: Иваново
Поблагодарили: 0 раз
Репутация:  4 
|
Способов украсить свой сайт действительно очень много. Это можно сделать с помощью скриптов, плагинов, картинок и прочего, прочего, прочего… Но сразу хочется отметить, что сайт должен быть не только красивым, но и удобным для наших посетителей! Поэтому мы будем украшать сайт и этим делать его удобным. Итак, начнем… 1. Первое с чего мы начинаем украшать сайт – это фон. Каким должен быть фон сайта? Моя ошибка была в том, что я выбрала очень яркий фон. Лично мне он нравился, но как оказалось такой фон был очень неудобным и даже немного раздражающим для посетителей. Поэтому, что нельзя делать – это выбирать яркий фон. Фон должен быть спокойным, неброским, чтобы при чтении материала ничего не мешало и не уставали глаза. Иначе посетители останутся у вас недолго. Я походила на сайты с большой посещаемостью и ни у кого нет ярких фонов, все фоны в спокойных тонах. Также хотелось бы отметить, что при загрузке моего сайта с телефона основной фон моего сайта был красным (такой цвет был установлен в шаблоне), что тоже было неудобно при чтении. Как узнать какой цвет вашего сайта основной? Можно зайти с телефона (простого) на свой сайт, либо скопировать что-либо у себя на сайте и вставить это в World-документ. Вы сразу увидите. С помощью программы ColorMania или подобной ей узнаете цвет (шестнадцатеричный номер). Затем зайдя в администраторскую часть сайта выберите файл «Таблица стилей (style.css). Нажав в браузере сочетание клавиш Ctrl+F у вас появится поле, где нужно ввести тот цвет, который вы хотите поменять. Обычно это в самом начале таблицы, параметр body: background-color. Ставьте нужный вам цвет и радуйтесь результатам. На моем сайте первоначально основной цвет был кирпичный, а стал нежно-желтый. Читать стало намного приятней.
2. Так как у меня сайт о кулинарии, то на нём много фотографий. А смотреть фотографии приятно в увеличенном виде. Конечно, когда открывается новое окно – это не всегда удобно. Поэтому я установила плагин Auto Highslide. Описывать как устанавливать плагины не буду, так как большинство владельцев своего сайта это знают. Плагин не имеет настроек поэтому трудностей в использовании его у вас возникнуть не должно. Единственное условие – у фотографии должна быть ссылка. Иначе плагин её увеличивать не будет. В результате использования плагина фотография увеличивается прямо на той странице, на которой размещена. Считаю это хорошим способом украсить свой сайт. Красиво и удобно…3. Если вам понравился какой-нибудь сайт и вы хотите подружиться с его владельцем вы ищете так называемые социальные кнопки. Но не те, с помощью которых люди делятся этой статьей с другими, а те которые ведут к автору. Многие для этого используют плагины, я же использовала для этого простой html-код и разместила его в сайдбаре с помощью виджета «Текст». Иконки для такого кода можно найти в Интернете, благо выбор большой. Так как мой сайт о кулинарии я выбрала такие.[img]http://puzyirik.ru/wp-content/uploads/2012/10/кнопки.png[/img]А код представила ниже. Думаю, сделать это сможет каждый. Конечно же адреса своих аккаунтов и адреса картинок у вас будут свои. Данный код нужно вставить в виджет "Текст" и поместить в то место, где вы хотите его видеть.
<noindex><p align="center"> <a href="http://feeds.feedburner.com/puzyirikru" rel="nofollow" target="_blank"><img src="http://puzyirik.ru/wp-content/uploads/2012/09/RSS.png" alt="Подписаться по RSS" title="Подписаться на RSS" width="68" height="59"></a><a href="http://vkontakte.ru/id177761199" rel="nofollow" target="_blank"><img src="http://puzyirik.ru/wp-content/uploads/2012/09/VK.png" alt="Присоединиться в ВКонтакте" title="Присоединиться в ВКонтакте" width="68" height="59" style="margin:0 5px 0 5px;" ></a><a href="http://www.facebook.com/olga.kamysheva.3" rel="nofollow" target="_blank"><img src="http://puzyirik.ru/wp-content/uploads/2012/09/FB.png" alt="Присоединиться в Facebook" title="Присоединиться в Facebook" width="68" height="59"></a></p><p align="center"><a href="https://plus.google.com/u/0/109316312526664510740?rel=author" rel="nofollow" target="_blank"><img src="http://puzyirik.ru/wp-content/uploads/2012/09/GP.png" alt="Присоединиться в Google+" title="Присоединиться в Google+" width="68" height="59"></a><a href="http://my.mail.ru/#page=/list/zhemchuzhinka.84/?" rel="nofollow" target="_blank"><img src="http://puzyirik.ru/wp-content/uploads/2012/09/MR.png" alt="Подружиться в Моем Мире" title="Подружиться в Моем Мире" width="68" height="59" style="margin:0 5px 0 5px;"></a><a href="https://twitter.com/nominaciya1" rel="nofollow" target="_blank"><img src="http://puzyirik.ru/wp-content/uploads/2012/09/TW.png" alt="Присоединиться в Твиттер" title="Присоединиться в Твиттер" width="68" height="59"></a></p></noindex>
4. Немаловажной частью сайта является постраничная навигация. На многих сайтах этой части уделяется мало внимания. И это очень мешает поиску и просмотру статей. Часто встречаются блоги, на которых вместо постраничной навигации стоят слова «Ранее» или «Предыдущие записи», «Позднее» или «Следующие записи». Есть несколько плагинов, которые решают эту проблему. Для Wordpress я использовала плагин WP-pagenavi, но потом в Интернете нашла способ сделать это без плагина. Он не намного сложней, но зато это способ сделать навигацию такой, какой вы хотите её видеть. Данный способ принадлежит владельцу сайта WP-KAMA Альтернативный взгляд на WordPress Тимуру. За это ему большое спасибо! Необходимо в файл functions.php вставить следующий код:
[font=arial, helvetica, sans-serif]/* Альтернатива wp_pagenavi (без лишних обращений к данным) ------------------------------------------------------------------------------ */ function kama_pagenavi($before='', $after='', $echo=true) { /* ================ Настройки ================ */ $text_num_page = ''; // Текст для количества страниц. {current} заменится текущей, а {last} последней. Пример: 'Страница {current} из {last}' = Страница 4 из 60 $num_pages = 10; // сколько ссылок показывать $stepLink = 10; // после навигации ссылки с определенным шагом (значение = число (какой шаг) или '', если не нужно показывать). Пример: 1,2,3...10,20,30 $dotright_text = '…'; // промежуточный текст "до". $dotright_text2 = '…'; // промежуточный текст "после". $backtext = '« назад'; // текст "перейти на предыдущую страницу". Ставим '', если эта ссылка не нужна. $nexttext = 'вперед »'; // текст "перейти на следующую страницу". Ставим '', если эта ссылка не нужна. $first_page_text = '« к началу'; // текст "к первой странице" или ставим '', если вместо текста нужно показать номер страницы. $last_page_text = 'в конец »'; // текст "к последней странице" или пишем '', если вместо текста нужно показать номер страницы. /* ================ Конец Настроек ================ */ [/font] [font=arial, helvetica, sans-serif]global $wp_query; $posts_per_page = (int) $wp_query->query_vars[posts_per_page]; $paged = (int) $wp_query->query_vars[paged]; $max_page = $wp_query->max_num_pages;[/font] [font=arial, helvetica, sans-serif]if($max_page <= 1 ) return false; //проверка на надобность в навигации[/font] [font=arial, helvetica, sans-serif]if(empty($paged) || $paged == 0) $paged = 1;[/font] [font=arial, helvetica, sans-serif]$pages_to_show = intval($num_pages); $pages_to_show_minus_1 = $pages_to_show-1;[/font] [font=arial, helvetica, sans-serif]$half_page_start = floor($pages_to_show_minus_1/2); //сколько ссылок до текущей страницы $half_page_end = ceil($pages_to_show_minus_1/2); //сколько ссылок после текущей страницы[/font] [font=arial, helvetica, sans-serif]$start_page = $paged - $half_page_start; //первая страница $end_page = $paged + $half_page_end; //последняя страница (условно)[/font] [font=arial, helvetica, sans-serif]if($start_page <= 0) $start_page = 1; if(($end_page - $start_page) != $pages_to_show_minus_1) $end_page = $start_page + $pages_to_show_minus_1; if($end_page > $max_page) { $start_page = $max_page - $pages_to_show_minus_1; $end_page = (int) $max_page; }[/font] [font=arial, helvetica, sans-serif]if($start_page <= 0) $start_page = 1;[/font] [font=arial, helvetica, sans-serif]$out='';//выводим навигацию $out.= $before."<div class='wp-pagenavi'>n"; if ($text_num_page){ $text_num_page = preg_replace ('!{current}|{last}!','%s',$text_num_page); $out.= sprintf ("<span class='pages'>$text_num_page</span>",$paged,$max_page); }[/font] [font=arial, helvetica, sans-serif] if ($backtext && $paged!=1) $out.= '<a href="'.get_pagenum_link(($paged-1)).'">'.$backtext.'</a>';[/font] [font=arial, helvetica, sans-serif] if ($start_page >= 2 && $pages_to_show < $max_page) { $out.= '<a href="'.get_pagenum_link().'">'. ($first_page_text?$first_page_text:1) .'</a>'; if($dotright_text && $start_page!=2) $out.= '<span class="extend">'.$dotright_text.'</span>'; }[/font] [font=arial, helvetica, sans-serif] for($i = $start_page; $i <= $end_page; $i++) { if($i == $paged) { $out.= '<span class="current">'.$i.'</span>'; } else {[/font] [font=arial, helvetica, sans-serif] $out.= '<a href="'.get_pagenum_link($i).'">'.$i.'</a>'; } }[/font] [font=arial, helvetica, sans-serif] //ссылки с шагом if ($stepLink && $end_page < $max_page){ for($i=$end_page+1; $i<=$max_page; $i++) { if($i % $stepLink == 0 && $i!==$num_pages) { if (++$dd == 1) $out.= '<span class="extend">'.$dotright_text2.'</span>'; $out.= '<a href="'.get_pagenum_link($i).'">'.$i.'</a>'; } } }[/font] [font=arial, helvetica, sans-serif] if ($end_page < $max_page) { if($dotright_text && $end_page!=($max_page-1)) $out.= '<span class="extend">'.$dotright_text2.'</span>'; $out.= '<a href="'.get_pagenum_link($max_page).'">'. ($last_page_text?$last_page_text:$max_page) .'</a>'; }[/font] [font=arial, helvetica, sans-serif] if ($nexttext && $paged!=$end_page) $out.= '<a href="'.get_pagenum_link(($paged+1)).'">'.$nexttext.'</a>';[/font] [font=arial, helvetica, sans-serif] $out.= "</div>".$after."n"; if ($echo) echo $out; else return $out; }[/font]
Настройки описаны прямо в коде, они идентичны настройкам самого wp-pagenavi, с той лишь разницей, что вместо текста "к последней странице" можно вывести номер последней страницы.В файл style.css добавить стили для красивого отображения номеров страниц. Я оставила настройки от плагина WP-pagenavi, у меня они вписались очень даже ничего.
[font=arial, helvetica, sans-serif]/*
Default style for WP-PageNavi plugin[/font]
[font=arial, helvetica, sans-serif]*/[/font]
[font=arial, helvetica, sans-serif].wp-pagenavi {
clear: both;
}[/font]
[font=arial, helvetica, sans-serif].wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}[/font]
[font=arial, helvetica, sans-serif].wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}[/font]
[font=arial, helvetica, sans-serif].wp-pagenavi span.current {
font-weight: bold;
}[/font]
После проделанных операций осталось сделать совсем немного: в файлах где используется постраничная навигация (index.php , archive.php , single.php) необходимо вставить следующий код[php]<?php kama_pagenavi(); ?> [/php]В моей теме уже была похожая функция, выглядела она так:[php]<?php if (function_exists('wp_pagenavi')) wp_pagenavi(); ?>[/php]Поэтому я просто заменила wp_pagenavi на kama_pagenavi. В результате у меня получилась такая навигация: [img]http://puzyirik.ru/wp-content/uploads/2012/10/навигация.png[/img]5. Часто бывает, что на странице много текста, комментариев и прочего и прочитав до конца нужно вернуться наверх. Мотать колесиком мыши не очень удобно. Красивая штука – стрелка «Наверх». Вариантов её исполнения тоже много – и с помощью плагина и с помощью кода. Я выбрала второй, так как это не очень сложно. Для этого я сделала двойную картинку в Фотошопе в виде груши ( ну нравятся мне груши). Двойная нужна она для того, чтобы при наведении одна сменяла другую. Выглядит она так:
[img]http://puzyirik.ru/wp-content/uploads/2012/10/arrows2.png[/img]
Сделать её нужно в формате .png, чтобы фон был прозрачный. Затем в файл script.js, который находится внутри моей темы я вставила вот этот код:
/* Скрипт кнопки "Вверх" HTML на странице: <a id="gotop" href="#" onclick="top.goTop(); return false;"></a> ------------------------------------*/ (function() { function $(id){ return document.getElementById(id); } function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 12; var dx = 0; var dy = 0; var bx = 0; var by = 0; var wx = 0; var wy = 0; if (document.documentElement) { dx = document.documentElement.scrollLeft || 0; dy = document.documentElement.scrollTop || 0; } if (document.body) { bx = document.body.scrollLeft || 0; by = document.body.scrollTop || 0; } var wx = window.scrollX || 0; var wy = window.scrollY || 0; var x = Math.max(wx, Math.max(bx, dx)); var y = Math.max(wy, Math.max(by, dy)); var speed = 1 + acceleration; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); if(x > 0 || y > 0) { var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")" window.setTimeout(invokeFunction, time); } return false; } //* function scrollTop(){ var el = $('gotop'); var stop = (document.body.scrollTop || document.documentElement.scrollTop); if(stop>400){ if(el.style.display!='block'){ el.style.display='block'; smoothopaque(el, 0, 100, 1); } } else el.style.display='none'; return false; } // Плавная смена прозрачности function smoothopaque(el, startop, endop, inc){ op = startop; // Устанавливаем прозрачность setopacity(el, op); // Начинаем изменение прозрачности setTimeout(slowopacity, 1); function slowopacity(){ if(startop < endop){ op = op + inc; if(op < endop){ setTimeout(slowopacity, 1); } }else{ op = op - inc; if(op > endop){ setTimeout(slowopacity, 1); } } setopacity(el, op); }; }; // установка opacity function setopacity(el, opacity){ el.style.opacity = (opacity/100); el.style.filter = 'alpha(opacity=' + opacity + ')'; }; if (window.addEventListener){ window.addEventListener("scroll", scrollTop, false); window.addEventListener("load", scrollTop, false); } else if (window.attachEvent){ window.attachEvent("onscroll", scrollTop); window.attachEvent("onload", scrollTop); } window['top'] = {}; window['top']['goTop'] = goTop; })(); /* конец скрипта кнопка "Вверх" */
Затем в файл style.css добавила стили для моей кнопки ( если картинка будет другая, то у вас они возможно будут другие). Конечно, нужно указать где находится ваша картинка
.scrollTop {
background:url(путь до вашей картики/gotop.png) 0 0 no-repeat;
display: block;
width: 92px;
height: 108px;
position: fixed;
bottom: 20px;
right: 50px;
z-index: 2000; }
.scrollTop:hover { background-position: 0 -108px; }
В параметре background:url() нужно указать адрес, где находится ваша картинка. Чтобы ваша «стрелка» появилась на странице, необходимо перед закрывающем тегом </body> вставить следующий код:<a id="gotop" class="scrollTop" title="В начало страницы" href="#" onclick="top.goTop(); return false;"></a>
В результате в правом нижнем углу моего сайта можно видеть следующее:
[img]http://puzyirik.ru/wp-content/uploads/2012/10/Груша.png[/img]
6. Для кулинарного сайта очень важно, чтобы статьи были с картинками. И хотелось бы, чтобы люди как можно дольше задерживались и переходили от статьи к статье. Что же в этом поможет? Отличный плагин по перелинковке с картинками. Из всех, которые я перепробовала – этот подошел как нельзя лучше. Называется он Related Posts Thumbnails. Простой в настройке, так как меню на русском языке, а также можно подстроить его под свой сайт. Настраиваются практически все параметры так, что впишется в ваш дизайн идеально. Вот как это выглядит у меня:
[img]http://puzyirik.ru/wp-content/uploads/2012/10/плагин-.png[/img]
7. Возвращаясь к теме о социальных кнопках хочу рассказать вам о сервисе share42.com. Многие используют его на своих сайтах – я не исключение. Дело в том, что этот сервис делает настройку таких кнопок в творчество. Вы сами выбираете, какие кнопки будут у вас расположены и как они будут располагаться. Сервис предлагает 2 варианта: горизонтальный и вертикальный плавающий. Также здесь настраиваются размеры кнопок, их порядок (какая за какой будет следовать) и сразу можно посмотреть как это будет выглядеть. Проследовав простой инструкции по установке и сделав все внимательно вы останетесь довольны результатом. У меня сейчас это выглядит так:
[img]http://puzyirik.ru/wp-content/uploads/2012/10/кнопочки.png[/img]
8. Люди уже давно научились передавать эмоции в виде графических знаков. Конечно же все об этом знают – это смайлики. От самых простых до неимоверно сложных. Поэтому очень приятно читать комментарии людей, сопровождающиеся такими вот забавными рожицами. Я тоже хотела, чтобы на моём блоге были смайлики. Но как, наверное, и многие другие графически могу передать лишь немногие. Поэтому искала плагин, который бы отвечал моим «запросам» и был удобен в использовании. Нашла его на сайте WP-KAMA Альтернативный взгляд на WordPress . Удобней его и красивее мне не попадался. Особенность этого плагина такая, что его можно дополнять своими смайликами. И не только ими. Автор разрешает это делать. И вот как это выглядит сейчас у меня:
[img]http://puzyirik.ru/wp-content/uploads/2012/10/до.png[/img]
А при наведении курсора на смайлик
[img]http://puzyirik.ru/wp-content/uploads/2012/10/после.png[/img]
Кликнув по «желаемому» смайлику он автоматически вставляется в текст и в итоге комментарий «оживает».
9. Вам нравится когда к Вам обращаются по имени? Когда помнят Вас? Вот и мне очень понравилось, когда я желая оставить комментарий на одном блоге увидела «С возвращением, Ольга». Думаю: «Я же не регистрировалась здесь, обычный блог…». Оказывается тоже ничего сложного здесь не было. Достаточно вставить следующий код в файл script.js
/* приветствие комментаторов */ var $j = jQuery.noConflict(); $j(document).ready(function() { var author_val = $j('#author').val(); if( author_val !='' && $j('#email').val() !='' ) { $j('#author-data').hide(); $j('#author-data').before('<div id="welcome">С возвращением, <strong>'+author_val+'</strong>! <a href="#">Изменить »</a></div>') $j('#welcome a').toggle( function() { $j('#author-data').show(300); $j(this).html('Свернуть »'); return false; }, function() { $j('#author-data').hide(300); $j(this).html('Изменить »'); return false; } ); } }) /* конец приветствие комментаторов */
В результате вместо обычной формы комментариев
[img]http://puzyirik.ru/wp-content/uploads/2012/10/до1.png[/img]
мы увидим такое приятное приветствие
[img]http://puzyirik.ru/wp-content/uploads/2012/10/после2.png[/img]
Причем нажав на кнопку «Изменить» всегда можно изменить ваши данные. Если такая форма обращения будет и у вас на блоге, то уверена многим это будет приятно.
10. Ещё одна возможность украсить сайт предоставляется посредством расширения визуального редактора в WordPress. Изначально он выглядит вот так:[img]http://puzyirik.ru/wp-content/uploads/2012/10/редактор.png[/img]
А вот как он выглядит у меня:
[img]http://puzyirik.ru/wp-content/uploads/2012/10/редактор2.png[/img]
Благодаря этому можно без лишних движений украсить свою статью различными стилями шрифтов, размерами шрифта, выбрать другой шрифт и тому подобное. Если вы хотите расширить панель так как у меня, то достаточно в файл functions.php вставить следующий код: (вставлять нужно в самый конец перед закрывающемся тегом ?>)
/*** Расширение возможностей виз.редактора ***/
add_filter('tiny_mce_before_init', 'addButtonsToMyTinyMCE' );
function addButtonsToMyTinyMCE($in)
{
$in['theme_advanced_buttons1']='bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justify
center,justifyright,|,link,unlink,wp_more,|,spellchecker,wp_fullscreen,wp_adv,hr,';
$in['theme_advanced_buttons2']='formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removefor
mat,|,charmap,|,outdent,indent,|,undo,redo,wp_help';
$in['theme_advanced_buttons3']='fontselect,fontsizeselect,styleselect,backcolor,|,sup,sub,image,cleanup,code
,';
$in['theme_advanced_buttons4']='cut,copy,paste,forecolorpicker,backcolorpicker,visualaid,anchor,';
return $in;
}
/*** конец Расширение возможностей виз.редактора ***/
Писать статьи будет проще, выглядеть они будут под ваш дизайн, а посетителям читать ваши посты будет гораздо легче и интереснее!
Ну вот только некоторые способы, как можно украсить свой сайт. Конечно же, их гораздо больше и я постепенно узнаю всё новые и новые. Я не «крутой вебмастер», я только учусь, но думаю мои «находки» будут полезны и вам, дорогие читатели. А если нашли ошибки – пишите в этой теме - я рада учиться и принимаю любые замечания.P.S. Если решили что-то использовать на своем сайте - пишите в комментариях что получилось, а что нет. Также мне это поможет знать какие "фишки" более востребованы! Спасибо!
При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.
[img]http://www.masterwebs.ru/sp/seopult.gif[/img]
|
|
|
Сообщение сайта
10 способов украсить сайт
nika_mw
26.10.2012, 13:45;
Ответить: metel
[Услуги] Баннер/Графика/Сайт
