n-wp.ru — блог о WordPress
Как настроить тему Mistique | n-wp.ru

Как настроить тему Mistique

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

После установки программы зайдите в ее настройки. Они начинаются с выбора расположения сайдбаров и цветовой гаммы.

Дизайн

Выберете то расположение и тот цвет, который вам больше нравится.

tiaurus-2010-05-03_105816

После этого вам нужно решить, какой шаблон использовать:с фиксированной шириной или “резиновый”. Я всегда в этом случае выбираю “резиновый”, то есть тот, который автоматически будет подстраиваться под разрешение вашего монитора и размер окна браузера. Если вы выбираете “резиновый” шаблон, то укажите, сколько процентов должна занимать колонка с основными записями.

tiaurus-2010-05-03_110709

Если же вы выбрали фиксированную ширину, то и ее стоит точно обозначить.

tiaurus-2010-05-03_110305

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

tiaurus-2010-05-03_110815

Содержание

Настройки содержимого достаточно простые. Есть несколько моментов, которые вам нужно установить, но даже если вы этого не сделаете, все будет отображаться корректно. Для начала определите, какие мета-данные нужно показывать в каждой записи. Так же следует указать, в каком виде выводить посты на главной — полностью, или же в виде короткого текстового анонса. Если вы выберете вывод содержимого полностью (рекомендую), то оно будет выводится до тега more со всеми изображениями. Если же вы выберете краткий текстовый анонс записи, то нужно будет указать его длину.

tiaurus-2010-05-03_111400

Далее следует настройка миниатюр изображений. Эти миниатюры используются при выводе содержимого в виде краткого текстового анонса и в “карусельке”. Если же вы не делали раньше миниатюры изображений, то тогда нужно предварительно воспользоваться плагином Regenerate Thumbnails — он пройдется по всем постам и создаст миниатюры. Размеры миниатюр в этом плагине нужно установить такие же, как и в настройках этой темы. Впрочем, можно обойтись без миниатюр — в настройках есть установка брать первое изображение из поста, и использовать его в качестве миниатюры для анонсов (Auto generate thumbnails). Единственное в этом случае условие, которое нужно соблюдать — снабжать каждый пост картинкой.

tiaurus-2010-05-03_112212

Можно настроить показ стран комментаторов в виде флагов, но я считаю это излишним, к тому же такая функция существенно увеличивает нагрузку на блог.

Зачем нанимать бригаду ремонтников, которая снимет с вас денег по полной программе? Ремонтируем квартиру сами — учимся и делаем ремонт более экономным!

tiaurus-2010-05-03_112638

Далее следует настроить ту самую “карусельку” — анонс постов на главной странице. В ней можно показывать определенное количество публикаций (настраивается). Посты меняются с определенной периодичностью (время сменя слайда настраивается). Чтобы в слайдер не попадали слишком давние посты, можно выставить временной порог, ограничивающий это. Ну и самое главное — выбрать, где выводить посты в “карусельке”: на всех страницах, только на страницах поиска, в архивах.

tiaurus-2010-05-03_113216

По умолчанию стоит вариант вывода только тех постов в “карусельке”, которые специально отмечены.

tiaurus-2010-05-03_121927

В настройках подвала используются шорткоды. Вы можете изменить содержимое подвала, используя их.tiaurus-2010-05-03_115723 Просто впишите нужные шорткоды в форму и посмотрите, что получилось.

Навигация

Далее следует настроить навигацию. Сразу под шапкой темы показывается выпадающее меню. В этом меню в качестве пунктов можно использовать страницы блога, категории или избранные ссылки. Можно это меню и отключить. Я советую использовать страницы (иерархия сохраняется и отображается).

tiaurus-2010-05-03_113450

Потом переходите к настройкам “плюшек” — Твиттера и RSS: укажите ваш ник в Твиттере, и пропишите путь к RSS. Поле RSS заполняется автоматически, но его можно изменить, если вы хотите использовать краткий вывод RSS (…/feed/rss), или же если вы используете внешние сервисы (например, Feedburner).

tiaurus-2010-05-03_113944

СЕО

Пункт настройки поисковой оптимизации следует использовать в том случае, если у вас нет никаких других seo-плагинов (например, Light SEO). Эта настройка позволит создавать к каждой записи уникальный заголовок для страниц комментирования (чтобы избежать дублирования при разбивке больших обсуждений), создавать описание каждой страницы, используя мета-теги и ключевые слова. Если вы не знаете, что такое SEO, и не применяете для этого плагины, то поставьте эту галочку.

tiaurus-2010-05-03_114041

Реклама

Раздел настройки рекламы содержит поля, в которые нужно вставлять рекламный код. Этот код автоматически будет виден в тех поста, в которых вы будете использовать шорткод (вставляется в режиме HTML в пост, страницу или текстовый виджет). Пример шорткода:

tiaurus-2010-05-03_114714

Раздел для продвинутых

В разделе для продвинутых можно указать использовать jQuery, Ajax и эффект lightbox. Первые два Java скрипта отображают изменения на странице без перезагрузки, а так же добавляют красивые визуальные эффекты. Lightbox помогает красиво выводить картинки.

tiaurus-2010-05-03_115132

Так же в этом разделе можно добавить свои функции в файл functions.php, не прибегая к его офлайновому редактированию. Да, это тот код, который может заменять работу плагинов.

Китайские копии телефонов выделяются ценой, но у них есть один недостаток — нельзя использовать оригинальные программы и игры. Однако и тут нашлись умельцы, которые сделали бесплатные игры на китайский iphone. Наслаждаемся!

tiaurus-2010-05-03_115626

Пользовательский CSS

В этом разделе настроек можно добавить в CSS свое дополнительное оформление (например, оформление постовых). Этот раздел, как и предыдущий, удобно использовать в том случае, если у вас нет доступа через FTP к файлам темы (есть и такие тарифные планы).

tiaurus-2010-05-03_115936

Сохранение настроек и восстановление

В принципе, это все. Главное после всех этих проделанных операций — сохранить настройки. После этого можете открыть блог и посмотреть, что получилось. Если вы запутались, то не переживайте — есть кнопка, кликнув по которой можно восстановить настройки темы по-умолчанию.

tiaurus-2010-05-03_120258

Настройка виджетов

В принципе, тема самодостаточная и без виджетов. Но если вы хотите изменить содержимое сайдбаров и подвала, то в теме создано несколько удобных виджетов. Обратите внимание, какие есть виджеты,

tiaurus-2010-05-03_121402

и куда их можно вставить.

tiaurus-2010-05-03_121439  tiaurus-2010-05-03_121456

Надеюсь, что этот пост окажется вам полезным.

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

69 комментариев

  • Спасибо за пояснительную записку, но если бы она была месяц назад было бы лучше. Это было то время, когда я методом тыка разбирался в этой теме.
    У меня два вопроса:
    1. Каруселька, на моем блоге вообще не работает. Вернее она показывает один анонс, а на остальных начинает глючить. Думаю, что это вызвано плагином кэширующим базу даных. Вы не знаете с чем это может быть связано?
    2. Вы сказали, что CSS можно настроить плагины. Разъясните пожалуйста, как это сделать. Я конечно знаю, что CSS, это важный инструмент для блоггера, но никак не могу понять, как самостоятельно вносить изменения.
    Спасибо вам за сайт и за вашу проделанную работу.

    • 1. Каруселька в моем тестовом блоге работает, но довольно быстро, и регулировка задержки между сменой слайдов почти не действует. Поэтому делаю вывод, что все дело в капризном скрипте, который отвечает за работу этой карусельки. В этом случае советую отключить ее в настройках, и попробовать использовать другие плагины. Некоторые из них можно найти тут: http://n-wp.ru/tag/anonsy.
      2. Про «Вы сказали, что CSS можно настроить плагины» не понял. Поясните, что вы имели ввиду? CSS — это оформление блога (цвет, шрифт, ширина, картинки, отступы …), а плагины — это плагины. Посмотрите в папке с темой — там должен быть как минимум один файл с расширением css — в нем как раз и прописано все это.

  • я ошибся про слово плагины. Хотел сказать постовые. Как настроить CSS дайте пару советов. Я знаю, что эти непонятные буковки есть в теме блога, но не понимаю, как это все работает.
    Кстати вот вам подарок http://idearu.com/xotite-nachat-biznes-v-internete-rekomenduyu-poleznyj-sajt/
    Там пока тегами закрыта ссылка, может обменяемся ссылками? Не сложно будет постовой поставить на мой сайт с анкором «Бизнес идеи»?

    • Чтобы оформить постовой, посмотрите вот эти записи:
      Как красиво оформить постовой | Плагин «Постовой»: http://n-wp.ru/1542
      Как красиво оформить текст | Несколько CSS-примеров: http://n-wp.ru/2770
      Как выделять постовых в блоге: http://n-wp.ru/1104
      Приведу в качестве примера код постового в этом блоге. В файл style.css я добавил специальный класс:

      Если мне нужно вставить постовой, я его оформляю так:

      Результат можете увидеть в конце текста предыдущей публикации.
      А вообще, CSS — это отдельная, большая тема, непосредственно связанная с разработкой сайтов. Она требует вдумчивого изучения.
      По поводу обмена ссылками: хоть это и не в моих правилах, но я подумаю.

  • Прошу прощенья, что достаю вопросами не по теме.

    1
    .postovoy {margin:0 0 1em 0; padding:10px 10px 10px 10px; border:1px solid #eee; background:#fcfcfc;font-style:italic;font-size:0.85em;line-height:1.4em; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px;}

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

  • Куда именно этот код нужно вставить

    Читаем еще раз предыдущий комментарий: «Приведу в качестве примера код постового в этом блоге. В файл style.css я добавил специальный класс:…»

  • я почти во всем разобрался. Получается вводить CSS и Div
    Скажите пожалуйста, как в вашем примере изменить цвет фона постового к примеру на голубой? Если не сложно покажите пример. Я сравню и станет понятно.
    За ранее спасибо.

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

  • Все, я разобрался. Везде в палитрах стоят заглавные буквы, а нужно писать с маленьких. Изменил размер и сразу изменился цвет.
    Спасибо за рекомендации.
    И самое главное спасибо, что натолкнули на правильный ход мылси, и я наконец начал разбираться со стилями.

  • Изумительный мануал!!!Не где в рунете лучше разжёвывания по настройкам не видел!!!tiaurus дружище ты просто гуру!!
    У меня просьба к тебе возникла,не мог бы ты друг сделать такой же мануал по вот этой теме:http://www.woothemes.com/demo/spectrum/ тема шикарная!!!я её установил себе!!а с настройками запутался!!Вся прелесть в том что также как и в предыдущем посте работает без сторонних плагинов(у тебя взял за правило)!!По функционалу она почти такая же как выше в посте ты изложил!!Имеет возможность локализации но здесь я профан:((Ставил прогу для её перевода Poedit вроде файлы создались а перевод не отобразился наверно в данной программе знаний у меня маловато:(.И ещё тема имеет баги в выводе табов в виджетах они отображаются но не хотят работать:(и с слайдером тоже самое не могу разобраться!!,с отображением миниатюр!!Сижу над ней уже около 4 дней один раз до утра:)смотрю как баран на новые ворота а понять не могу в чём проблема:(Если выставишь такой мануал в переводе и с выводом ссылки выличенных проблем в коде(если имеются)то денеку закину поддержу данный пост как говорится тебе на кошелёк!!Так как тема очень сильно запала!!!Да и люди многие будут довольны!!!

    • Спасибо за положительный отзыв!
      Я бы сделал обзор о теме Spectrum, но она платная, стоит 75-200$, и свободно не распространяется. К тому же ее техподдержка тоже платная.

  • Друг я всё понял:)Если не хочишь обсуждать настройки и т.п.здесь, то давай через почту или асю:))386074540 и там обсудим данную проблему лично!!:)Я знаю что ты на всё способен:)!!!!

  • Мир не без добрых людей!!:)всё настроили,перевели всего 1000 рубле!!а не 70-200$ :)занимался продвинутый талантливый программист:)и мне сказали что нет таких шаблонов,тем ,которых нельзя бы выличить:)делается абсолютно ВСЁ!!!

  • tiaurus :
    Мои расценки на такие услуги более лояльные .

    Я в этом и не сомневался что ты профи!!Но ты мне так дал понять в посте выше что типа иди лесом как говорится!!и делай за 70-200 вот мне и прешлось человека искать!!Я тебя просил по аське связаться ты не захотел а жаль:(

    • 1. Я не буду заниматься ничем противозаконным. Тема платная, воровать ее я не буду.
      2. Такие вопросы, как настройка чего-либо, а тем более за отдельную плату, в комментариях не решаются.

  • tiaurus, спасибо за обзор, тема отличная, мануал не уступает ей.
    У меня маленькая просьба — не подскажешь, где а шаблоне удалить лишний пробел между панелью навигации и собсна постами?

  • Спасибо! Очень дельная статья!
    Возник вопрос, не подскажите, а как там шритф изменить? Хочу чтоб везде был одинаковый, как на главной в шапке. А то сейчас шрифты разные.

  • Я изменила стили, думла что-то еще надо. Нет, через пару минут шрифты изменились.

  • Добрый день.
    Внимательно прочла тему, и комментарии. Но не меняется он, хоть убейте. Ткните меня носом, умоляю. Умаялась вся))))
    Раньше пыталась

    • Знаете, у меня вышеназванная проблема — замена фона, браузер Opera 10.60. Или раньше не замечал или она обновилась. Все было с фоном хорошо — как у вас, но вот сейчас в Opera буквально хлопает черный фон. При переходе по пунктам меню -вверху. Я подменил файл header.jpg сталохлопать на нижней половине окна. Чуш какая-то. Кэши вытирал. Снимок экрана выслать не могу — потому как «хлопает» — появляется на мгновение.
      Может у вас будет минутка и желание разобраться?

      • Возможно, что в качестве header.jpg используется неоптимизированный рисунок (очень большой по размеру или тяжелый во весу). Он не успевает загрузиться полностью, когда как все остальное содержимое уже загружено. Вот и хлопает.

  • отличная тема, только я её немного расширил, чтобы было место для второй колонки:) пришлось покапапться в style.css

  • Здравствуйте! Впервые вижу такое подробное описание настроек шаблона для WordPress!) Был удивлён такой великолепной работой автора) Тема замечательная, давно использую, но пару дней назад возникла проблема.
    При нажатии на rss, вылетает сообщение:

    Ошибка разбора XML: синтаксическая ошибка

    515:
    516:
    517:

    518:

    519:

    Не могу разобраться в чём дело. И что за скрипт такой на 518 строке (который и является ошибкой)?

    • На 518 строке у вас пустота :) Попробуйте добавить код в комментарий с помощью ссылки «вставить код».

  • Извиняюсь за прошлый комментарий! В теме есть баги, например если больше 1 комментария то пишется 2 comments, а еще дата не склоняется

          • Так это понятно, что нет. Они только в переведенной, а вы не знаете есть ли полностью переведенная?А еще в Chrome на главной не показываются картинки Твиттера и RSS в правом верхнем углу и текст справа от логотипа серый(хотя цвет стоит другой)

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

  • Подскажите пожалуйста. Я использую плагин WP-PostRatings. Не могу найти в файлах шаблона, как мне сделать так, чтобы он(плагин) не отображался на главной, а только внутри поста. Сейчас так:
    [img]http://4put.ru/pictures/max/73/225753.jpg[/img]
    ..это прямо с главной доступно.
    З.Ы. В настройках плагина, нет возможности настроить место его отображения.

    • А вы куда вставляете код вывода? И как выводите? Лучше выводить с помощью кода.
      Добавьте
      <?php if(function_exists('the_ratings')) { the_ratings(); } ?>
      только в single.php — тогда голосовалка будет отображаться только в отдельном посте.

  • Не могу найти, где в style.css регулируется отступ оснвоного поля от линии списка страниц (меню) и как кнопки сделать по центру , а не прижатыми к левой части страницы..

  • Нашел практически все ответы! Благодарю Вас за проделанную работу! Видно, что Вы — профи!

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

  • Хотел установить тему себе… Но постоянно сталкиваюсь с неприятными моментами при настройке…
    При открытии одной записи поле записи выглядит так:
    Добавление комментария 1
    Кнопки «Добавить» просто нет, она обрезалась.
    Если нажать «Комментарий», то поле для добавления комментария появляется полностью, но пропадает верх страницы вместе с боковой колонкой.
    Вставка комментарий - 2
    С чем это может быть связано? Такое ощущение, как будто где-то очень жестко прописан размер блока для вывода одной записи, но я не смог найти где это сделано.
    Посмотреть можно на сайте-примере primer.sosh1-12.ru

  • Здравствуйте, а как переименовать виджеты? У меня показывает Categories, а хотелось бы просто «Рубрики», да и все виджеты чтобы были на русском?

  • Добрый вечер! Хотела увеличить шрифт в шаблоне этой темы. Из всех комментариев, поняла как это сделать, но когда вошла во вкладку CSS, она была пуста, а по верху вот такая запись:
    «Здесь вы можете переопределить правила CSS, прописанные в файле css/core.css ! Этот файл я открыла, но там предупреждение — «Не редактируйте этот файл! (или любые другие файлы из этого пакета)
    Создать тему детского или использовать опции тему, чтобы сделать изменения!» Дайте пожалуйста подсказку, как мне поступить дальше? И этот блок CSS — должен быть пустым?

  • Добрый день, подскажите пожалуйста какая строчка в файле core.css отвечает за фон под текстом в контенте, 433-отвечает за цвет заголовка сайта а вот фон под текстом везде белый а хотелось бы другой

/* ]]> */