Из ВК

01 декабря 2009

Тема Light Word от WP для блоггера


История о том как заморочить себе правильную тему Light Word в блоггере.

Собственно когда я морочил задницу себе и людям с выбором места размещения своего блога, я напарывался на некий wordpress. Думаю все знают что это за зверь. Собственно объективно - лучшее двигло для графоманства и прочей публикации своего бреда в толще интернета, но как сервис для блоггинга - ацтой. Ацтой заключается в том что каждый пук там стоит отдельных денег. А именно (ща, паждтите открою свой акк на вротпресе):
  1. привязка блога к своему домену
  2. загрузка видео (на хе надо ибо видеохостенгов - как собак)
  3. собственные CSS (т.е. если надо сменить картинку в шапочке скажем, придётся отстегнуть)
  4. добавить места (в комплекте 3 гига, не знаю кому надо ещё для блога, учитывая что под почти все виды файлов есть бесплатные хостинги...)
  5. убрать рекламу (ну это понятно, хотя я её там особо не замечал)
  6. и увеличить количество частных юзеров до бесконечности (для клубов ананистов видом или ещё куда - не понятно)
Собственно меня вынесли пункты 1 и 3, даже я бы стерпел 1, но 3 - это анус (учитывая мою любовь к кастомизации).В общем ежели хотите вордпресс - ставьте его на свой хостинг, ну или могете отстёгивать абонентку самим создателям (тоже благородно) и не будете преть об апдейтах и прочих бекапах. Так вот. Я остановился-таки на блоггере, но у блогера своих тем мало, а с вордпресовскими он не совместим (что и понятно, архитектура темного движка совершенно не похожа). В вордпресе радующих глаз тем - тонна.

Так вот есть умельцы которые не жалея времени своего, конвертят темы вордпреса под блоггер, за что им нижайший. Нашёл я среди них и свою любимую - Light Word но у ней есть огроменный недостаток - нет "ушек" (у заголовка поста слева такой ярлычок с датой поста и количество коментов).


Оригинальный Light Word



Light Word for Blogger

Как говорится - "почувствуйте разницу!" Так вот, сейчас я расскажу как заиметь такие ушки у себя в блоггере (да, да, превозносите меня :))

Собственно начинается всё с настройки формата отметки времени. Это в "Настройках/Форматирование/Формат отметки времени" выбираем вариант типа "вторник, Декабрь 01, 2009" и сохраняем изменения. Далее нужно править тему. Скачайте её со страницы авторов (ещё раз спасибо им за конвертацию). Текущую вашу тему рекомендую сохранить на всякий пожарный. К описанию стилей Вам нужно добавить:
 .comm_date {
background:transparent url(http://wp-themes.com/wp-content/themes/lightword/images/date_comm_box.png) no-repeat scroll 0 0;
height:100px;
margin:0 0 0 -82px;
position:absolute;
text-align:center;
width:57px;
z-index:2;
}
.comm_date .data {
display:block;
font-weight:700;
margin-left:-1px;
padding-top:10px;
text-transform:uppercase;
}
.comm_date .data .j {
display:block;
font-size:24px;
}
.comm_date .nr_comm {
color:#FFFFFF;
display:block;
font-weight:700;
padding-top:14px;
}
.comm_date .nr_comm_spot, .comm_date .dsq-comment-count {
display:block;
margin:0 9px 0 8px;
padding:6px 0 5px;
}
.nr_comm a, .nr_comm{
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
font-size:14px;
}
Перед тегом </head> вcтавить:
<script type='text/javascript'>
function getThemeDate(postTimeStamp){
  var re = /([а-яА-Яa-z]{4})[а-яА-Яa-z]+, ([а-яА-Яa-z]{3})[а-яА-Яa-z]+ (\d{2}), \d{2}(\d{2})/i;
  var dateHTML = postTimeStamp.replace(re, &quot;$1&lt;span class=\&quot;j\&quot;&gt;$3&lt;/span&gt;$2/$4&quot;);
  return dateHTML;
}
</script>
Именно эта функция будет расковыривать метку времени поста и пхать её в ушко :) Потом ищете строку "<span class='post-timestamp'><b:if cond='data:post.dateHeader'>on <data:post.dateHeader/></b:if></span>" и заменяете этот кусок на:
      <div class='comm_date'>
        <span class='data'>
          <script type='text/javascript'>
            document.write(getThemeDate(&#39;<data:post.timestamp/>&#39;));
          </script>
        </span>
      <span class='nr_comm'>
        <b:if cond='data:post.allowComments'><a class='nr_comm_spot' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'  title='количество комментариев'><b:if cond='data:post.numComments == 1'>1<b:else/><data:post.numComments/></b:if></a>
        <b:else/>
        <span class='nr_comm_spot' title='комментарии выключены'>Off</span>
        </b:if>
      </span>
    </div>
Также рекомендую удалить следующий кусок (дабы не повторяться):
        <b:if cond='data:blog.pageType != &quot;item&quot;'> /
          <b:if cond='data:post.allowComments'>Comments: (<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1<b:else/><data:post.numComments/></b:if></a>)
          </b:if>
        </b:if>
 Вот теперь у Вас есть "Лёгкое Слово" с ушками от qnub'а :)

ЗЫЖ люди тямущие в JavaScript могут поинтересоваться: "чё это у тебя за бред в диапазоне букв [а-яА-Яa-z]  и приэтом используется модификатор i для регулярного выражения?" Так вот. оказалось что хвалёный Chrome не работает с русскими буквами с этим модификатором (даже не знаю работает с английскими, в общем написал так и так русские названия дня и месяца обрабатываются нормально везде). Кстати даже гонимый осёл хавает это дело нормально (с 6-й версии точно, ниже не проверял, хотя в 6й версии и косячится положение и вид ушка, но регистронезависимую обработку русских букв он делает на ура)... Такие вот технологии гугель...