Сегодня я расскажу про тему, которую, конечно никому из вас не пожелаю, но она имеет место быть в нашей вебмастерской жизни. А повествую я про свою историю переноса нескольких сайтов на движке wordpress на новый хостинг и домен.

Причина переноса сайта на новый хостинг в основном однопричинна – это недовольство существующим хостинг-провайдером. Этот процесс я тоже опишу в статье, но он не особо сложный. А бывает, что яндекс банит новый сайт, которому 2-3 месяца и который еще даже никак не монетизировался. На письма в службу поддержки приходит посылание на 4 ссылки, а в сайт вложено немало сил. Причем вылетел не один, а сразу несколько таких новых сайтов. Что делать?

Чтобы устранить возможную причину в будущем как хостинг (других причин я не нашел, но и в эту верится с трудом) я решил перенести сайты (на движке wordpress) сразу и на новый домен и на новый хостинг. Сайт на wordpress как и любой движок на MySQL состоит из собственно файлов и базы данных. С ними-то и надо возиться .

Перенос сайта на другой хостинг

Хостинг-провайдеров за свою вебмастерскую жизнь сменил в районе 5-6. Что касается wordpress:

1) Сжимаем все файлы на старом хостинге и скачиваем к себе на компьютер + скачиваем базу данных.

2) Создаем на новом хостинге базу данных и импортируем старую в новую.

3) Заливаем на новый хостинг сжатую в первом пункте папку с файлами и распаковываем ее.

4) Меняем в файле wp-config.php имя БД, имя пользователя БД, пароль и хост.

5) Прописываем для домена DNS сервера нового хостинга.

Это совсем несложная процедура, с которой вы наверно уже встречались. Не так ли?

Перенос сайта на новый хостинг и домен

В отличие от простого переноса, где меняется только “дом” для сайта, здесь изменяется еще и его структура URL. В связи с этим возникают дополнительные проблемы. Процесс этого переноса будет разбит на 3 части: работа с файлами, работа с БД и работа с robots.txt и .htaccess. Пример будет приводиться для переноса сайта с доменом site1.ru на домен site2.ru.

Работа с файлами:

1) Так же как и в простом переносе на другой хостинг, сжимаем все файлы и скачиваем их к себе на компьютер.

2) Загружаем файлы на новый хостинг и распаковываем.

3) Просто создаем новую БД и прописываем имя БД, имя пользователя, пароль и хост в файле wp-config.php.

4) Если у вас стоят ЧПУ на блоге, то не забываем перенести файл .htaccess. У меня он почему-то сразу не смог перенестись и вызвал много проблем .

Работа с БД:

1) Скачиваем к себе на компьютер базу данных и открываем ее через текстовый редактор (я советую notepad++).

2) Заменяем все вхождения site1.ru на site2.ru (в notepad++ есть кнопка заменить все).

3) Заменяем все пути вхождения до папки с wordpress. Например, на одном хостинге у меня было /home2/username/, а на другом /home/username/siteru/www/. Эти пути можно спросить у самих провайдеров. Поменяв эти пути вы дадите корректный путь к вашим загрузкам, сайтмап и так далее.

4) Импортируйте переделанную базу данных на новый хостинг (ее вы уже создали в 3-ем пункте в работе с файлами).

Если вы уже имеете припаркованный домен к хостеру, то блог должен заработать. Если он не заработал, то делитесь проблемой в комментариях. Я постараюсь помочь .

Работа с robots.txt и .htaccess:

Теперь необходимо для поисковых систем показать кто здесь главный (какой сайт является главным зеркалом). У меня был бан сайта яндексом, поэтому на него было все равно. Я просто сделал для гугла редирект в файле .htaccess (на старом хостинге, добавив в него строчки:

Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://site2.ru/$1  [R=301,L]

В этому случае, когда пользователи будут заходить с гугла на записи на старом домене, они автоматически будут перенаправлены на эти же записи на новом домене. PR перетечет тоже.

Если же вы хотите перенести грамотно сайт и для яндекса, то вам понадобится вписать в файл robots.txt строчку:

host: www.site2.ru

Вот и все. Если вы правильно следовали всем пунктам, то у вас получится перенести сайт с минимальнейшими потерями как в плане пузомерок, так и в плане трафика.

Я искренне желаю вам не столкнуться с этой проблемой. Но если все таки столкнулись, то надеюсь моя инструкция будет вам полезна. Если что-то непонятно или не получается, то задавайте вопросы в комментариях. А вам когда-нибудь приходилось переносить сайты? Напишите немного из своего опыта .

Постовой:
Вопрос как можно заработать в интернете интересует многих. Ответы найдет на блоге max1net.com.

Статьи по теме:

• WordPress – учиться стоит
• Методы эффективной вставки контекстной рекламы в посты wordpress
• Как сделать слайдер (карусель) на wordpress
• Апгрейд 404 – делаем красивую страницу об ошибке

Всем привет! Про слайдер для wordpress я обмолвился в статье про промежуточные итоги работы над блогом. Там я обещал рассказать как легко и быстро установить так называемый слайдер (или по-другому карусель) к себе на блог. Так вот рассказываю. Как всегда подробно и пошагово.

Речь будет идти о плагине для wordpress – RC-Tiny. Автор плагина Роланд Чанишвили. Пример слайдера можете видеть у меня на блоге перед заголовками постов и на главной странице. Он легко устанавливается и гибко настраивается. Этот слайдер для wordpress отлично вписывается в дизайн, экономит много место на блоге, а также является симпатичным мультимедиа.

8 несложных шагов, которые организуют карусель на вашем блоге:

1) Скачиваем сам плагин;

2) Заливаем его на сервер в папку wp-content/plugins/ и активируем;

3) Создаем папку big в корневом каталоге блога (где папки wp-content, wp-admin и другие). Можно и другую, но по умолчанию плагин проверяет наличие именно этой папки. Эта директория будет нужна для заливки картинок, которые будут отображаться в слайдере.

4) Теперь самое интересное . Как привязать картинку к определенному посту на блоге? Для этого в плагине существует несколько методов. Они зависят от того какая у вас стоит “система постоянных ссылок”. Если у вас:

- ЧПУ как у меня, то для привязки используется имя поста или статьи. Для того, чтобы привязать этот пост, я должен создать картинку slider-karusel-wordpress.jpg. Теперь посмотрите на адрес этой страницы и вам станет понятней. Этот метод в админке стоит по умолчанию и называется slug.jpg.

- номера постов в урле страниц (когда страница выглядит так http://sosnovskij.ru/?p=1339), то для этого нужно создать картинку с именем 1339.jpg. В админке этот метод называется post_id.jpg. Кстати для корректной работы плагина используйте только расширение jpg.

А сейчас конкретный пример моего слайдера:
Урлы постов:
- http://sosnovskij.ru/readers-without-ads/
- http://sosnovskij.ru/konkurs-na-luchshuyu-fotografiyu-blogera/
- http://sosnovskij.ru/foto-bloggerov/

Имена картинок:
- readers-without-ads.jpg
- konkurs-na-luchshuyu-fotografiyu-blogera.jpg
- foto-bloggerov.jpg

5) После того как стало понятно как привязывать картинки к постам идем в админку, указываем размеры картинок (именно такие размеры придется использовать), метод привязки и выбираем, что показывать в слайдере. Можно показывать:

- последние 3 добавленные картинки (+ отмеченные);
- случайные картинки;
- отмеченные картинки.

6) Заливаем картинки в папку big (чем меньше будут весить картинки, тем быстрее будет загружаться слайдер) и в необходимом месте шаблона wordpress вставляем код:

<!--?php if(is_object($rctiny)) $rctiny--->show(); ?&gt;

Я вставил этот код в index.php и в single.php – в остальных файлах думаю смысла нет. Смотрим что получилось. Если отображение нравится, то всё поздравляю вас – плагин установлен. Если же оформление не нравится, то переходим к пункту 7.

7) Изменяем оформление слайдера. Пункт “добавить к CSS”. Есть 3 позиции:

- #information a:hover{color:#000000} – это цвет текста (вместо 000000 поставить свой цвет);
- #information {background:#D9F0FF} – цвет фона (вместо D9F0FF свой цвет);
- {border:1px solid #ссс} – размер рамки и ее цвет (1px – это один пиксель, вместо ссс – свой цвет).

Изменяем тут по вкусу.

8 ) Можно редактировать размер текста, который выводится в слайдере. По умолчанию это 200 знаков. Если надо, то редактируем файл rc-tiny.class.php. Находим там 74 страочку и изменяем число на необходимое.

Теперь точно все плагин слайдер для wordpress установлен и настроен . Он достаточно легкий и не сильно грузит движок. Как вам?

Андрей Аронский предложил мануал по тому как организовать карусель на сайте без использования плагина, за что ему большое спасибо. Итак, читатем.

____________

В качестве альтернативы предлагаю вам способ, как добавить карусель на ваш блог без плагина.

Итак, для начала напомню, что каждый плагин для WordPress тормозит его работу, увеличивает глючность и мешает нахождению причины неисправностей. Я не спорю, но бывают плагины, без которых невозможно обойтись: на написание кода у вас уйдёт не одна неделя, а если вы не располагаете ни временем, ни знанием языка программирования – то тут и речи не может идти об замене плагина собственными скриптами.

Другое дело, когда речь идёт об плагинах, интегрирующих в WordPress скрипты других разработчиков. В качестве примера можно сразу вспомнить миллион реализаций плагинов, добавляющих Light Box эффект к вашим изображениям. Все они делают одно и то же: подключают JS – библиотеку и используют её функции.

Иногда, заглянув в один из таких плагинов, просто ужасаешься: становится страшно за будущее нашего программного обеспечения. Прошли те времена, когда все ругали кривой код индийских программистов: нет, они пишут также, просто ругать уже некому.

Отгоним пессимистические мысли: всё в наших руках, и вернёмся к нашей карусели.

Плагин написан с использованием скрипта отличного программиста Michael Leigeber’a. Наверное, по причине занятости, автор поленился написать хорошее руководство для своего скрипта, но, зато, представил несколько примеров. Рассмотрим один из них.

1. Первым делом решим, куда мы будем вставлять нашу карусель. Я думаю, небольшой опыт в написании и редактировании тем для WordPress у вас есть. По крайней мере, кому, как ни вам знать, как называются у вас шаблоны, отвечающие за вид главной страницы, страницы с постом, страницы с архивами. Напомню, что в стандартной теме они носят названия: index.php, single.php, arhive.php соответственно. Также вы можете пользоваться функциями вродe is_home(), is_single и т.д, и/или разместить код в footer.php.

2. Скачиваем скрипт.

3. Распаковываем его куда-нибудь, я бы посоветовал в папку с темой, в которую вы его вставляете. Нам надо 2 файла и 1 папку: compressed.js, script.js, IMAGES.

4. Подключаем библиотеку:

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’);?>/carusel/compressed.js”></script>

В случае, если вы записали файлы в папку carusel в директорию с вашей темой для WordPress.

5. Вставляем JavaScript код:

<script type=”text/javascript”>

$(‘slideshow’).style.display=’none’;

$(‘wrapper’).style.display=’block’;

var slideshow=new TINY.slideshow(“slideshow”);

window.onload=function(){

slideshow.auto=true;

slideshow.speed=5;

slideshow.link=”linkhover”;

slideshow.info=”information”;

slideshow.thumbs=”slider”;

slideshow.left=”slideleft”;

slideshow.right=”slideright”;

slideshow.scrollSpeed=4;

slideshow.spacing=5;

slideshow.active=”#fff”;

slideshow.init(“slideshow”,”image”,”imgprev”,”imgnext”,”imglink”);

}

</script>

Это функция вызова скрипта. Далее я разберу отдельно каждую строчку.

6. Добавляем код с картинками.

<ul id=”slideshow”>

<li>

<h3>TinySlideshow v1</h3>

<span><?php bloginfo(‘stylesheet_directory’);?>/carusel/photos/orange-fish.jpg</span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>

<a href=”#”><img src=”<?php bloginfo(‘stylesheet_directory’);?>/carusel/thumbnails/orange-fish-thumb.jpg” alt=”Orange Fish” /></a>

</li>

<li>

<h3>Sea Turtle</h3>

<span><?php bloginfo(‘stylesheet_directory’);?>/carusel/photos/sea-turtle.jpg</span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>

<img src=”<?php bloginfo(‘stylesheet_directory’);?>/carusel/thumbnails/sea-turtle-thumb.jpg” alt=”Sea Turtle” />

</li>

</ul>

Это содержание нашей карусели. Оно оформлено в виде списка. Каждая новая картинка находится в виде отдельной строчки <li></li>. Написанное в теге <h3></h3> будет отображаться как заголовок во всплывающем окне. В теге <span></span> содержится ссылка на полное изображение. В нашем случае, это изображение находится в подпапке PHOTOS папки CARUSEL в директории темы нашего WordPress. То, что написано в <p></p> будет отображаться во всплывающем окне.

Последним тегом пропишем ссылку, которая откроется по нажатию на изображение. Если в качестве якоря ссылки поставить изображение (как видно в примере), то оно будет отображаться внизу карусели в виде слайд шоу. Изображение надо будет сохранить в папку THUMBNAILS, естественно уменьшенный вариант. Кстати, в плагине нет слайд шоу.

Теперь самое интересное: смотрим на JavaScript функцию, которую мы видели выше. Видите строчку $(‘slideshow’).style.display=’none’; ? Это значит, что список, который мы написали выше отображаться не будет. Сейчас страница выглядит также как и до того, как мы что-то писали. Следующим шагом  будет вставка div’а, в котором это всё будет отображаться.

7. Мой догадливый читатель подумал, что div будет называться также как в строчке JavaScript’а:

$(‘wrapper’).style.display=’block’;

Всё правильно! А выглядеть наш код будет примерно вот так:

<div id=”wrapper”>

<div id=”fullsize”>

<div id=”imgprev” class=”imgnav” title=”Previous Image”></div>

<div id=”imglink”></div>

<div id=”imgnext” class=”imgnav” title=”Next Image”></div>

<div id=”image”></div>

<div id=”information”>

<h3></h3>

<p></p>

</div>

</div>

<div id=”thumbnails”>

<div id=”slideleft” title=”Slide Left”></div>

<div id=”slidearea”>

<div id=”slider”></div>

</div>

<div id=”slideright” title=”Slide Right”></div>

</div>

</div>

Большой div “wrapper” содержит в себе два div’а поменьше: “fullsize” и “thumbnails”, являющихся полным размером и слайд шоу в виде превьюшек соответственно.

Пусть вас не удивляет их обманчивая пустота: они наполнены только тем, что нужно, чтоб описать это в каскадной таблице стилей и предоставить скрипту для наполнения красотой.

8. Разбираемся с JavaScript функцией.

Итак:

var slideshow=new TINY.slideshow(“slideshow”);

window.onload=function(){

}

Это копируем не задумываясь. Зачем нам сейчас разбираться в теории создания классов в JavaScript?

А вот то, что внутри, нам уже интересно. Рассмотрим то, что на примере:

slideshow.auto=true; – прокручивается ли карусель автоматически. По умолчанию – false.

slideshow.speed=5; – скорость прокрутки. По умолчанию – 10.

slideshow.link=”linkhover”; – это название класса отображения ссылки. Вернёмся к нему, когда будем рассматривать каскадные стили.

slideshow.info=”information”; – информация. Указывает id div’а, содержащегося в “fullsize”.

slideshow.thumbs=”slider”; – id div’а в котором будет отображаться слайд шоу. Если удалить строчку – слайд шоу не будет.

slideshow.left=”slideleft”; slideshow.right=”slideright”; – id div’ов, отвечающих за прокрутку слайд шоу. Как можно заметить, все 3 div’а находятся в “thumbnails”. Как вы их расположите, значения не имеет.

slideshow.scrollSpeed=4; – скорость, с которой будет крутиться слайдер. Чем больше число – тем выше скорость.

slideshow.spacing=5; – расстояние между превьюшками.

slideshow.active=”#fff”; – цвет граница активной превьюшки.

slideshow.init(“slideshow”,”image”,”imgprev”,”imgnext”,”imglink”); – то, без чего это всё вообще работать не будет. “slideshow” – это id списка, о котором я писал в пункте 6. “image”,”imgprev”,”imgnext”,”imglink” – это div’ы изображения, кнопки «вперёд», «назад» и ссылки соответственно. Всё это содержится в “fullsize”.

9. Опишем это всё с помощью CSS. Тут замечу, что подргузка лишнего CSS занимает  много времени, а при реализации карусели посредством плагина без загрузки лишней каскадной таблицы стилей обойтись нельзя было.

Я очень мучился и извращался, когда создавал свой плагин G_Buzz_Button, пытаясь обойтись без дополнительной CSS. Мне это стоило больших нервов и времени, но я всё сделал и получил очень аккуратный и лёгкий код на выходе.

Реализовывая карусель моим методом, мы сможем добавить всё нужное для таблицы стилей в CSS нашей темы. Добавим такой код:

#slideshow {list-style:none; color:#fff}

#slideshow span {display:none}

#wrapper {width:506px; margin:50px auto; display:none}

#wrapper * {margin:0; padding:0}

#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}

#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}

#information h3 {padding:4px 8px 3px; font-size:14px}

#information p {padding:0 8px 8px; font-size: 10px}

#image {width:500px}

#image img {position:absolute; z-index:25; width:auto}

.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}

#imgprev {left:0; background:url(images/left.gif) left center no-repeat}

#imgnext {right:0; background:url(images/right.gif) right center no-repeat}

#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}

.linkhover {background:url(images/link.gif) center center no-repeat}

#thumbnails {margin-top:15px}

#slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#222}

#slideleft:hover {background-color:#333}

#slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center no-repeat}

#slideright:hover {background-color:#333}

#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}

#slider {position:absolute; left:0; height:81px}

#slider img {cursor:pointer; border:1px solid #666; padding:2px}

Я не буду сейчас рассказывать о том, что такое CSS, вы должны об этом знать и так. Как видите, тут описаны все наши id и class’ы. Вы можете оставить так, как есть, а можете редактировать как вашей душе угодно.

Кстати, хочу сделать важное замечание: все названия вы можете изменять как вам угодно, главное, чтоб они все были согласованны в div’ах, в JavaScript’е и в CSS.

Предлагаю вам попробовать уйти от стандартной компоновки и расположить компоненты карусели как душе угодно. К примеру, все кнопки могут быть отдельно, вы можете не делать большое изображение, а просто увеличить изображения из слайдера. Вы можете сделать так, чтоб всё крутилось и менялось с огромной скоростью, а можете сделать, чтоб ссылки из карусели вели в разные места одной статьи. Вы совсем не ограничены количеством изображений в карусели и их размером.

__________

Спасибо, Андрею за подробную инструкцию.

А сейчас о приятном. Планка в 400 подписчиков преодолена – сегодня feedburner показал цифру 404 (прям как одноименная страница об ошибке), что несказанно радует. А еще вчера на столе я обнаружил следующий конверт.

Это 1400 рублей на рекламную кампанию adwords. Такой бонусный купон можно было получить, оплатив какой-то сервис или воспользовавшись чьими-нибудь услугами (в пределах участников акции). Но самое интересно, что в акции я не участвовал, то есть купон пришел мне просто так, как участнику google adsense . Может быть кому-то тоже такие купончики приходили?

Забавно получается: начинаешь писать пост днем в одном городе, а заканчиваешь вечером в другом.

Постовой:
Когда нужны актуальные программы на заказ, начинаешь задумываться, что разработка программного обеспечения будет лучшим решением.

Статьи по теме:

• WordPress – учиться стоит
• Методы эффективной вставки контекстной рекламы в посты wordpress
• Перенос сайта на новый (другой) хостинг и домен (wordpress)
• Апгрейд 404 – делаем красивую страницу об ошибке

Пару дней назад я случайно наткнулся на страницу 404 у одного блогера. Она полностью была на английском языке. Тут я решил посмотреть какая же страница у меня на блоге. А получилось, что она ничем не отличается. Я подумал, что это неправильно. И буквально вчера сделал небольшой апгрейд своей страницы 404.

Вы можете посмотреть на нее, например, по этой ссылке. А какая страница 404 у вас?

Вообщем что я там изменил? Я, во-первых, написал по-русски, что человек попал не туда и дал ссылку на главную страницу. Это вполне естественно, но есть не на всех блогах. Во-вторых, ниже я вставил список самых популярных тем на блоге и посоветовал их прочитать. И, в-третьих, для тех кто каким-то образом впервые попал на мой блог именно на 404 страницу, фото и немного о блоге.

Это, конечно, хорошо, а как это сделать-то? А сделать это обычно проще простого.

1) Вначале надо скачать ваш файл со страницей 404 (путь domen.com/wp-content/themes/ваша-тема/404.php.

2) Затем перевести все что вы хотите на русский язык или дописать что-то свое. Надо переводить именно то, что непосредственно показывается на вашей странице 404. Редактируйте файлы wordpress в правильном редакторе. Я, например, использую NotePad++.

3) Загрузить файл обратно на сервер.

Программа минимум выполнена. Но это все равно обычная страница 404 только переведенная. Идти можно и дальше, а именно:

1) Вывод поиска по сайту <?php include (TEMPLATEPATH . ‘/searchform.php’); ?>

2) Вывод популярных статей (если у вас стоит соответствующий плагин). <?php akpc_most_popular(); ?>

3) Вывод категорий <?php wp_list_cats(); ?>

Вообщем туда вставить можно все что угодно – ограничения только в вашей фантазии. На последок выкладываю забавные картинки для страницы 404.

Те, которые пробовали и пытались, но у них ничего не вышло,  пишите в комментариях в чем проблемы. Я постараюсь помочь .

Информация от партнеров:
Качественное представительство в сети Интернет это уже не галочка, а эффективный инструмент корпоративного маркетинга. Компания Гранд Парк предоставляет широкий перечень услуг по разработке сайтов, автоматизации предприятия, поисковому продвижению. Основное преимущество оптимальное соотношение цена-качество.

Статьи по теме:

• WordPress – учиться стоит
• Методы эффективной вставки контекстной рекламы в посты wordpress
• Перенос сайта на новый (другой) хостинг и домен (wordpress)
• Как сделать слайдер (карусель) на wordpress