Уникальная тема wordpress своими руками в программе Artisteer

wordpress_1Доброго времени суток, дорогие посетители, друзья и читатели моего блога!

Не знаю, как Вам, а мне безумно не нравятся однотипные, одинаково оформленные блоги. Бывает, заходишь на блог, вроде и информация интересная, а оформление уже просто «приелось». У Вас ни разу такого не было? Наверное, это сказываются пять лет моего обучения в художественной школе, хотя…

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

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

После долгих поисков мне на помощь пришла замечательная программа Artisteer. С ней сегодня я Вас и спешу познакомить.

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

Поскольку у Вас скорее всего нету программы Artisteer 2 (а именно по примеру этой версии программы будет приведен сегодняшний урок), скачайте эту программу   (резервная ссылка для скачивания) вместе с подробной инструкцией по установке прямо сейчас.

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

Интерфейс программы Artisteer имеет внешний вид, схожий с программой Microsoft Office.  Поскольку программу можно установить на русском языке, изучение программы до мельчайших подробностей не составит для Вас особого труда.

При первом запуске Artisteer Вас спросят, какой именно шаблон Вы хотите создать. Поскольку Ваша цель — это создание темы для wordpress, соответственно, Вам необходимо выбрать пункт, как указано в примере (нажать кнопку «WordPress»):

wordpress_2

Если Вы вдруг по ошибке выберете не тот вариант, то вызовите данное меню. Для этого нажмите на клавиатуре сочетание «горячих клавиш» Ctrl+N».

Первая вкладка, открывающаяся при запуске программы по умолчанию, это вкладка «Идеи». Находясь в этой вкладке, Вы можете выбрать самый легкий путь для работы в этой программе. А именно, создать тему wordpress  из уже имеющихся вариантов. Однако имейте ввиду, что маловероятно, что при такой разработке темы wordpress Ваш дизайн для неё станет уникальным.

wordpress_3

Что ж, давайте перейдем к более детальному изучению программы Artisteer. Представьте, что перед Вами лежит чистый лист бумаги и ручка. С чего бы Вы начали? Верно… Вы бы стали рисовать блоки, примерять ширину и производить тому подобные действия. Иными словами, Вы бы стали создавать макет. Потому, первая вкладка, в которой я предлагаю Вам начать работу в программе Artisteer — это вкладка «Макет».

wordpress_4

Кнопка «Макет страницы» поможет Вам определиться с верхней частью Вашего блога. Хотите ли Вы использовать в шапке своего блога верхний колонтитул (это та часть, где будет находиться картинка). А, может, Вам просто достаточно выведения меню.

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

Также вкладка «Макет страницы» отвечает за такую важную составляющую дизайна Вашего блога, как расположение блоков. Нажмите на кнопку «Колонки» и выберите нужный Вам вариант:

wordpress_5

Имейте ввиду, что Вы не просто можете выбрать определенный вариант расположения колонок,  но и можете даже сами вручную задать их ширину. Чтобы сделать это нажмите на кнопку «Настройка ширины». У Вас всплывет окно, в котором и необходимо задать настройки.

wordpress_6

Можно сказать, что условно ширина Вашего листа 100%. Тогда, в зависимости от того, сколько Вы выбрали колонок, Вам необходимо выставить ширину в процентном соотношении. При нахождении в боковом столбце одной колонки, оптимальный вариант будет выставление 30-35%. Чтобы внесенные изменения вступили в силу, нажмите на кнопку «ОК».

Хочу обратить Ваше внимание на то, что, когда человек заходит к Вам на блог, то у него не просто загружается страница блога, у него загружаются лист и страница одновременно:

wordpress_9

Так, лист — это промежуток Вашей страницы, для которого Вам при разработке темы необходимо задать определённые границы. В программе Artisteer за настройку листа, соответственно, отвечает вкладка «Лист».

Для начала определитесь с формой листа:

wordpress_11

Задайте настройку ширины листа. Не ошибетесь, если зададите настройку листа 800 или 900 пикселей:

wordpress_10

Подумайте, хотите ли Вы, чтобы над Вашим листом был верхний отступ. Если хотите, задайте его размер:

wordpress_12

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

Со всеми остальными настройками не бойтесь эксперементировать, и тогда Вы обязательно получите именно ту тему, которую хотите:

wordpress_13

Если Вы произвели все необходимые настройки для листа, самое время настроить фон страницы. Вы можете выбрать фон из имеющихся вариантов, а можете загрузить свою картинку. Как правило, при установке своего фона используются картинки созданные специально для бесшовных фонов. Выберите заранее подготовленную картинку у себя на компьютере, выставите настройки, как показано в примере и нажмите кнопку «ОК» для внесения изменений:

wordpress_14

Следующий момент, на который я хочу обратить Ваше внимание, это создание верхнего колонтитула. Иными словами, давайте займемся детальной разработкой шапки блога. Чтобы у Вашего блога было не только верхнее меню, но и шапка, Вам во вкладке «Макет» нужно нажать на кнопку «Макет страницы» и выбрать в выпадающем списке первый вариант:

wordpress_15

Непосредственно за детальное редактирование отвечает вкладка «Верхний колонтитул».

Условно, вкладку «Верхний колонтитул» можно разделить на две части. Первая часть отвечает за оформление картинки фонового изображения шапки. Вторая же часть отвечает за текст. Вы можете самостоятельно задать высоту фоновой картинки, можете добавить на неё объект. Также возможна загрузка своего изображения (например, фото). При редактировании в программе есть возможность приближения и удаления, а также перемещения верхнего наложенного изображения.

wordpress_16

И вот, наконец, когда разработка основного дизайна завершена, можно перейти к окончательной детальной разработке. И начать я Вам предлагаю с оформления во вкладке «Меню».

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

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

wordpress_17

Перейдите ко вкладке «Статьи». Для начала определитесь со стилем написания Ваших статей. Хотите ли Вы помещать каждую свою новую статью в рамку, если да, то какую форму Вы хотите придать этой рамке. Затем выставите необходимые для отображения данные. В основном, как правило, указывают такие данные как «дата» и «автор». В представленном примере показано, как выставить данные настройки:

wordpress_18

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

wordpress_19

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

Обращаю Ваше отдельное, особое внимание на оформление изображений. Я настоятельно рекомендую Вам произвести настройки именно таким образом, как показано в примере.

Так, к примеру, если Вы захотите впоследствии загрузить в свою статью какую-то картинку с прозрачным фоном, то вокруг неё Вы не увидите тонких линий, показывающих ненужный и портящий вид ореол Вашей картинки:

wordpress_20

Во вкладке «Блоки» определитесь со стилем оформления (помните о сочетаемости общего стиля!). Буквально, каждая кнопка дает Вам возможность развернутых настроек. Эксперементируйте:

wordpress_21

Во вкладке «Кнопки» поработайте над дизайном кнопок. В этом плане возможности программы достаточно велики. Помимо того, что Вы можете выбрать форму кнопок, Вы также можете индивидуально проработать даже оттенок их цвета:

wordpress_22

И еще… При разработке дизайна блога, мы с Вами видим его внешний вид в рамках своего монитора, а это не очень хорошо. Есть такой замечательный сервис ViewLike.Us.  Благодаря использованию данного сервиса, Вы можете в любой момент, когда Ваша тема уже загружена, посмотреть, как будет выглядеть Ваш блог на обычных мониторах, iPad, а также смартфонах с разным разрешением.

Данный сервис не требует регистрации. Просто перейдите по ссылке и введите ссылку на Ваш блог, а затем нажмите кнопку «Show me how it looks!»:

wordpress_7

Используйте верхнее меню для просмотра. И, если Вам не нравится результат, отредактируйте тему и вновь загрузите вновь созданную на хостинг:

wordpress_8

На этом на сегодня у меня все.До скорой встречи.

P.S.Понравилась статья? Не забудьте поделиться ею с друзьями!

13 комментариев на “Уникальная тема wordpress своими руками в программе Artisteer”

  • Екатерина. Добрый вечер! Зашла к Вам в гости «на огонек» и очень понравился Ваш блог. На блоге можно найти очень много информации по создание и продвижению блога. Эта тема меня очень интересует. Спасибо за Вашу четкую и конкретную информацию. Успехов Вам!

  • Очень интересная информация, Екатерина! *THUMBS UP*
    Взяла статью в закладки.

    Если при знакомстве с программмой появятся вопросы, обязательно напишу Вам. Спасибо!

    • Здравствуйте, Людмила! Рада, что представленная информация заинтересовала Вас. Буду рада видеть Вас на блоге и впредь, тем более, что по данной программе еще будет дано в скором времени немало информации.

      С уважением.

  • Эта ссылка ведёт на файлообменник, а там тоже можно скачать только напрямую на компьютер (не взять оттуда ссылку, чтобы вставить в программу), а для моего интернета 60 мб это пол часа закачки и если связь оборвётся, то всё начинать сначала. Поэтому я скачиваю только через программы, которые пооддерживают докачку или торренты, а для этого должна быть прямая ссылка.

    Ладно, попробую ещё раз, если не получится, то поищу эту программу через торренты.

  • Екатерина, у меня в настройках прописан этот файлообменник, но там всё какие-то защиты ставят, не всегда удаётся скачать.

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

  • Спасибо, программу скачала, буду осваивать. Если что будет неясно, обращусь за помощью. Для меня это очень актуальный вопрос, так как давно ищу качественный шаблон для wordpress, но не могу найти то, что подошло бы на все 100%. Попробую сделать сама в этой программе. =) *IN LOVE*

  • Добрый день)
    Это всё понятно, что написано у вас.
    А вот как редактировать уже готовую тему?
    Как её «залить» в программу?

Оставить комментарий

This blog is kept spam free by WP-SpamFree.