У попередніх статтях «Уроки Artisteer (частина 1 , 2 ) »Були розглянуті деякі особливості створення та редагування шаблонів, зроблених в Artisteer 3.1. У цій статті ми розглянемо питання, пов'язані зі створенням шаблонів в Artisteer 4.0. Детальніше про нові зміни в Artisteer 4 Ви можете прочитати в статтях « Огляд Artisteer 4 (частина 1). Програма для створення шаблонів Joomla »І« Огляд Artisteer 4 (частина 2). Створення меню сайту ».

У статті буде розглянута робота з останньої на момент написання матеріалу (26.11.2012) версією Artisteer 4.0.0.58475 (для Windows) і Joomla 2.5.8. Частина з порушених тем «запропонована» відвідувачами сайту. Частина розглядалася раніше в коментарях або попередніх статтях, але тепер оформлена в більш структурованому вигляді і адаптована під Artisteer 4.0.

Клікабельним логотип в Artisteer 4.0

У статті " Уроки Artisteer 3.1 (частина 1). Чому Artisteer не зберігаються проект »Вже було розглянуто питання створення клікабельно логотипу, але для Artisteer 3.1. В Artisteer 4.0 трохи по-іншому.

Рекомендую спочатку створювати шаблон Artisteer з неклікабельним логотипом. Після того, як Ви будете готові до установки шаблону на сайт, експортуйте проект. Вам необхідно скопіювати файл логотипу з папки «images» шаблону, наприклад, в папку «templates» на сайті. Це потрібно для того, щоб розмір (ширина і висота) файлу логотипу збігався з тим, що Ви зробили в Artisteer.

Після цього в самому проекті Artisteer видаліть логотип. Створіть в меню Верх. колонтитул за допомогою інструменту Форма об'єкт Форма (малюнок нижче).

Урок Artisteer 4.0 зі створення клікабельно логотипу, за великим рахунком, полягає в створенні форми, завданні їй прозорості та вставки всередину певного HTML коду.

Натисніть правою кнопкою миші на створену форму і виберіть з контекстного меню пункт Редагувати вихідний код HTML (малюнок нижче)

Після цього в Artisteer з'явиться вікно Редактор HTML (малюнок нижче). Вставте в нього наступний код.

<P> <a href="https://aleksius.com/"> <img src = "/ templates / aleksius_com.png" alt = "aleksius.com"> </a> </ p>

або

<P> <a href="https://aleksius.com/"> <img src = "/ templates / aleksius-com.png" alt = "Aleksius.com"> </a> </ p>

Artisteer 4 дозволяє відредагувати HTML код шаблону (деяких його елементів) прямо в самій програмі.

У фрагменті коду вище «href =" https://aleksius.com/ "» - посилання на головну сторінку сайту. «Src =" / templates / aleksius_com.png "» - шлях до файлу логотипа (ім'я файлу «aleksius_com.png») від кореневої папки сайту. «Alt =" aleksius.com "» - текст, який буде відображатися в разі, якщо зображення логотипу не з'явиться. «Width =" 229 "height =" 100 "» - ширина і висота зображення логотипу в пікселях. Це не обов'язковий, але бажаний тег.

Після цього виділіть область і в меню Верх. колонтитул, група інструментів Правити, інструмент Ефекти виберіть пункт прозорість (значення 100%) (малюнок нижче).

Artisteer 4.0 за замовчуванням робить фон для форми. У випадку з логотипом це не потрібно.

В результаті Ви отримаєте зображення, показане на малюнку нижче.

Програма для створення шаблонів Joomla відобразить рамку і знак питання. Не лякайтеся так повинно бути. Після того, як Ви експортуєте шаблон і встановіть його на сайт, замість знаку питання буде логотип.

Тема і девіз сайту

Якщо Ви використовуєте заголовки і \ або девіз сайту для відображення його в шапці сайту (верхньому колонтитулі), то враховуйте, що в Artisteer 4.0 він буде відображатися, а після установки на сайт немає. У самому Artisteer 4 Ви налаштовуєте то, як ці текстові блоки будуть виглядати. Їх розмір, шрифт, колір, накреслення і положення. А після експорту шаблону і установки його на сайт перейдіть в адміністративну панель Joomla (на прикладі Joomla 3.0.2), перейдіть в меню Розширення, виберіть пункт Менеджер шаблонів, виберіть потрібний Вам шаблон і на вкладці Налаштування (малюнок нижче) в поля Headline і Slogan введіть заголовок вашого сайту і \ або його слоган.

Шаблони Joomla 2.5 Artisteer налаштовуються аналогічно.

Якщо Вам необхідно (абсолютно точно) вирівняти заголовок і слоган сайту по правому краю, то після експорту шаблону відкрийте файл «index.php», знайдіть у ньому наступний фрагмент коду:

<Div class = "art-shapes"> <h2 class = "art-headline" data-left = "ХХ%"> <a href="/<?php echo $document-> baseurl;?&gt; / "> < ? php echo $ this-> params-> get ( 'siteTitle'); ?&gt; </a> </ h2> <h2 class = "art-slogan" data-left = "ХХ%"> <? Php echo $ this-> params-> get ( 'siteSlogan'); ?> </ H2>

Замініть числа (відсотки) в тегах data-left = "ХХ%" на однаковий для класу art - headline і art - slogan. Наприклад, на 96%. Має вийти так:

<Divclass = "art-shapes"> <h2 class = "art-headline" data-left = "96%"> <a href="/<?php echo $document-> baseurl;?&gt; / "> <? php echo $ this-> params-> get ( 'siteTitle'); ?&gt; </a> </ h2> <h2 class = "art-slogan" data-left = "96%"> <? Php echo $ this-> params-> get ( 'siteSlogan'); ?> </ H2>

Зверніть увагу на те, що в нашому прикладі заголовок сайту і слоган вирівняні по правому краю. Саме тому таке велике значення класів art - headline і art - slogan. Мається на увазі, що слоган і заголовок закінчуються на 96% від лівого краю шапки сайту (заголовка).

Для того, щоб логотип сайту відступав від лівого краю шапки сайту (заголовка) на стільки ж на скільки слоган і заголовок відступають від правого краю, для симетрії, знайдіть наступний код.

<Div class = "art-textblock art-object804371413" data-left = "ХХ%">

Замініть числа (відсотки) в тегах data-left = "ХХ%" на 4% (у Вашому випадку може бути інше число). Вийти наступна конструкція.

<Div class = "art-textblock art-object804371413" data-left = "4%">

Це означає, що логотип сайту буде відступати від лівого краю сторінки на 4% (так як в нашому прикладі шаблон «гумовий»), і слоган і заголовок будуть відступати від правого краю на 4%.

Зверніть Вашу увагу на те, що за замовчуванням Artisteer 4.0.0.58475 робить заголовок сайту заголовком першого рівня H1. Це не зовсім правильно з точки зору SEO. Оскільки на сторінці повинен бути тільки один заголовок верхнього рівня (H1). Якщо у Вашій статті буде ще один заголовок першого рівня, то виходить, що на сторінці дана вимога не дотримується.

Змінити це легко. У прикладах вище Ви бачите, що рядок:

<H1 class = "art-headline" data-left = "96%">

була замінена на:

<H2 class = "art-headline" data-left = "96%">

Це можна зробити після експорту шаблону у файлі «index.php». Як автоматично перевірити сторінку на наявність SEO помилок і за допомогою чого їх можна усунути, читайте в статті « Огляд RSseo (частина 2). SEO оптимізація Joomla ».

Додаткову інформацію з даного питання Ви зможете знайти в статті « Уроки Artisteer 4.1 (частина 4). Робота з вертикальним і горизонтальним меню ».

Верхнє меню Artisteer 4.0 і чуйний дизайн Joomla

В Artisteer 4.0.0.58475 є можливість створення чуйного дизайну . Приклад того, як мій сайт виглядає на екрані з роздільною здатністю 320х480 пікселів, Ви можете бачити нижче (на прикладі Mozilla Firefox 17.0).

Чуйний дизайн або вірніше шаблон адаптувався (відгукнувся) на дозвіл вікна браузера і перемістив всі модулі в більш зручному розташуванні. Плюс змінив (отмасштабовані) розміри вмісту (малюнки в статтях, таблиці і так далі) за розміром вікна браузера. Це дуже зручно в зв'язку з ростом кількості мобільних пристроїв. Трохи детальніше про роботу шаблону Artisteer 4.0.0.58475 з чуйним дизайном можна прочитати в статті « Оновлення сайту Aleksius.com ».

Якщо у Вас є меню (верхнє або бічне (вертикальне)) і воно багаторівневе, то варто подумати над тим, як його будуть розкривати користувачі без мишки. Наприклад, за допомогою пальця руки на сенсорному екрані.

Спеціально для цього в Artisteer 4.0 передбачені опції рівнів. Перейдіть в розділ Меню, виберіть інструмент Рівні і натисніть на пункт Налаштування (малюнок нижче).

Меню Artisteer (меню Вашого шаблону) налаштовується за допомогою декількох опцій (малюнок нижче).

Нам потрібні опції Responsive Levels (малюнок нижче).

Тут все просто, втім, як все в Artisteer 4.0.

1. Один рівень. Відображатиметься тільки один рівень меню. Верхній.
2. Розкриття з оновленням. Меню розкривається при оновленні сторінки. Не дуже зручно і не завжди спрацьовує (з власного досвіду).
3. Відкриті. Відображатиметься розкрите меню. Це найзручніший, з точки зору користувача, варіант. Для випадку, коли ми говоримо про неможливість використання курсора.

У новій версії програми з'явилася можливість вибирати, які елементи заголовка будуть видні на модільних пристроях, а які ні. Детальніше про це в статті « Огляд Artisteer 4.2. Шаблони Joomla 2.5 - 3.0 ».

Позиції шаблону Artisteer 4.0 для Joomla

В Artisteer 4.0 були трохи змінені позиції шаблону для Joomla (малюнок нижче).

На численні прохання розробники додали позицію «position-30» в шапці сайту (в верхньому колонтитулі). Тепер немає позиції «syndicate» ( «position-14 syndicate»), в якій можна було відображати значок RSS стрічки. Її можна вивести в будь-якій позиції шаблона за допомогою модуля HTML-код. Трохи детальніше з позиціями шаблону Joomla Ви можете ознайомитися в статті « Уроки Artisteer 3.1 (частина 2). Позиції в шаблоні Joomla »І на офіційному сайті Artisteer.

Раніше, в Artisteer 3.1, то, що Ви розміщували в нижньому колонтитулі, в самому Artisteer переносилося на сайт. Зараз ні. В Joomla Вам необхідно створити модуль HTML-код і розмістити його в позиції «position-27».

У статті " Огляд Artisteer 4.1. Шаблони Joomla 2.5 - 3.0 »Ви зможете дізнатися як створити позицію шаблону в верхньому колонтитулі.

Як прибрати кордони таблиць в статтях

У статті " Уроки Artisteer 3.1 (частина 2). Позиції в шаблоні Joomla »Було порушено тему кордонів таблиці (в самому вмісті, в статтях). В Artisteer 4.0 і Joomla 2.5.8 - 3.0.2 це залишається актуальним. Як, наприклад, зробити одну таблицю на сторінці з межами, а другу - без них?

У файлі template.css експортованого шаблону додайте наступний код:

.noborder th, .noborder td {border: none; }

Для зручності рекомендую внести даний фрагмент в Artisteer (меню Файл, підменю Експорт, пункт Налаштування). На вкладці Параметри CSS внесіть в поле Додаткові CSS стилі вищевказаний фрагмент коду.

Потім перейдіть в редактор статей Joomla, відкрийте потрібну статтю, знайдіть ту таблицю, для якої необхідно прибрати кордон. В її параметрах (малюнок нижче) в поле Клас виберіть «noborder». Якщо цього класу немає, то виберіть пункт Значення і впишіть клас «noborder» самостійно.

Як підтвердити авторство для Google

Ті, хто викладає на свій сайт авторський (нескопірованний і \ або змінений) контент, можуть підтвердити своє авторство перед пошуковою системою Google за допомогою невеликої настройки шаблону і облікового запису в соціальній мережі Google+. Для чого це треба? Якщо коротко, то це позитивно впливає на позиції сторінок Вашого сайту в пошуковій системі Google. Вона знає, що той текст, який Ви помістили на своєму сайті, є Вашим, а не скопійованих. І при інших рівних умовах Ваш сайт буде займати вищу позицію (позиції) по відношенню до тих сайтів, на яких розміщено копію Вашої статті. Плюс, таким чином можна «втілити» Ваш сайт. Інтернет, за великим рахунком, «безликий». Сайти з'являються і зникають постійно. Більшість з новостворених сайтів не витримують більше року існування. Підтвердження авторства Google дасть можливість не тільки захистити авторство своєї праці, поліпшити позиції в пошуковій видачі, але і, можливо, побічно поліпшити поведінкові чинники. Користувач, який буде запитувати ту чи іншу інформацію в пошуковій системі, побачить не просто посилання на сайт, а й автора цієї статті (малюнок нижче).

Підтвердження авторства Google демонструє користувачеві, що власник сайту відповідає за результат своєї роботи і відкрито показує, що це його праця. І, можливо, користувач з більшою довірою і бажанням натисне саме на Вашу посилання. Ще один плюс, таке уявлення (малюнок вище) виділяє Ваш сайт серед інших сайтів в пошуковій видачі. Це також добре.

Крім цього, користувачеві, якому сподобалася Ваша стаття, можливо захочеться підписатися на оновлення новин з Вашої сторінки в соціальній мережі Google+.

Отже, давайте розглянемо, як підтвердити авторство контенту в Google. На прикладі Joomla сайту і шаблону, зробленого в Artisteer 4.0. Але для всіх інших сайтів і шаблонів, незалежно від того, за допомогою чого вони зроблені, все буде аналогічно за винятком дрібних технічних деталей.

Якщо Ви ще не зареєстровані в соціальній мережі Google+, то зареєструйтеся.

Зайдіть в свій профіль Google+. У рядку браузера знайдіть посилання, схожу на «https://plus.google.com/102101364649782322365», де «102101364649782322365» номер Вашого облікового запису в Google+.

Відкрийте файл «index.php» експортованого шаблону Artisteer 4.0. Знайдіть в ньому рядок:

Designed by <a href="/aleksius.com" target="_blank"> ХорошевскійАлексей </a>. </ Span>

Де «Хорошевський Олексій» ім'я автора шаблона, яка вказана при створенні шаблону в його налаштуваннях вкладка Опис (малюнок нижче).

Також при створенні шаблону в Artisteer 4.0 переконайтеся в тому, що в налаштуваннях шаблону на вкладці Сноска включена опція Зворотній посилання на автора (малюнок нижче).

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

Сайт Aleksius.com розробив <ahref = "https://plus.google.com/102101364649782322365" rel = "author" target = "_ blank"> Хорошевський Олексій </a>. </ Span>

А якщо зробили, то замініть існуючу на нову. Де на місці фраз «Сайт Aleksius.com розробив» та «Хорошевський Олексій», природно, вказуєте свої потрібні дані. На засланні «https://plus.google.com/102101364649782322365» замініть номер «102101364649782322365» на номер свого профілю в Google+.

Далі. У Вас на сайті повинна бути сторінка, на якій вказана інформація про Вас. Наприклад, у мене це сторінка «Контакти» (about-site / kontakty), де в нижній частині є фото і вказані ім'я та прізвище (малюнок нижче).

Необхідно дати в соціальній мережі Google+ (в своєму профілі) посилання на сторінку свого сайту з інформацією про себе. Для цього в своєму профілі Google+ знайдіть і натисніть на кнопку «Змінити профіль» (малюнок нижче).

На сторінці, що з'явилася, в нижній її частині, є розділ Посилання (малюнок нижче).

Натисніть на цей розділ. Після чого перед Вами з'явиться вікно редагування посилань (малюнок нижче).

Внесіть в поле URL-адресу повну адресу, включаючи протокол (HTTP або HTTPS), сторінки Вашого сайту з інформацією про Вас. Поле Текст посилання заповніть на свій розсуд. Збережіть всі зміни.

Далі перейдіть на вкладку «Все +1», яка знаходиться у верхній частині сторінки під Вашою аватаркой (малюнок нижче).

Знову натисніть «Змінити профіль». На сторінці, що з'явилася активуйте опцію Показувати цю вкладку в профілі (малюнок нижче).

Збережіть зміни. Настійно рекомендую завантажити в профіль Google+ свою якісну і чітку фотографію розміром 150 на 150 пікселів. Це потрібно для відображення Вашого фото поруч з посиланнями на Ваші статті в пошуковій видачі.

Тепер перевіряємо результат. На сторінці " Інструмент перевірки структурованих даних »В рядок www. examle. com вводимо адресу тієї сторінки свого сайту, авторство якої Ви хотіли підтвердити. У моєму випадку це посилання на статтю « Огляд Google Site Search »-« http://aleksius.com/joomla/rasshireniya/google-site-search-poisk-po-sajtu-joomla ». Якщо Ви бачите щось схоже на малюнку нижче, то у Вас все вийшло.

Якщо немає, то перевірте всі зроблені кроки. Можливо, варто почекати. Думаю, не більше 1-3 діб.

Як прибрати напис: «Joomla template created with Artisteer by»

При створенні шаблону в Artisteer в нижній частині шаблону може відображатися рядок «Joomla template created with Artisteer by». Прибрати її можна двома способами. Знайти в файлі «index.php» шаблону рядок

<Span id = "art-footnote-links"> <a href="http://www.artisteer.com/" target="_blank"> Web Template </a> created with Artisteer by <a href = "/ aleksius.com "target =" _ blank "> Хорошевський Олексій </a>. </ span>

І видалити її. Замість фрагмента «<a href="/aleksius.com" target="_blank"> Хорошевський Олексій </a>. </ Span>» у Вас буде інший.

І другий спосіб. У самому Artisteer в меню Файл, підменю Експорт, пункт Налаштування виберіть вкладку Сноска і відключіть опцію Зворотній посилання на CMS і Artisteer (малюнок нижче).

Lightbox Joomla 2.5

Якщо у Вас в статті розміщено зображення, яке має на увазі можливий його перегляд користувачами в збільшеному вигляді, то Artisteer 4.0 дозволяє це зробити з застосуванням ефекту Lightbox без встановлення сторонніх розширень. Нижче представлений приклад Lightbox в Joomla 2.5.8.

«Класичний» приклад Lightbox. Користувач натискає на зображення і його збільшений варіант з'являється над тестом, затемнюється фон і в правому верхньому куті з'являється хрестик з можливістю виходу з режиму перегляду. Вельми зручно.

Що для цього потрібно? Вам необхідно в одній папці на сервері створити два файли з майже однаковим ім'ям. Наприклад, «aleksiuscom.png» і «aleksiuscom-large.png». Де «aleksiuscom» ім'я файлу, а розширення може бути не тільки PNG. Файл «aleksiuscom.png» менше за розміром (по ширині і висоті), ніж «aleksiuscom-large.png». Він (файл «aleksiuscom.png») буде відображатися в тесті Вашої статті. А Файл «aleksiuscom-large.png» буде відображатися (із застосуванням ефекту Lightbox) тоді, коли користувач натисне на файл «aleksiuscom.png».

Потім в менеджері статей знайдіть потрібну, в ній знайдіть картинку, яку треба збільшувати, в прикладі це «aleksiuscom.png», і для цієї картинки в параметрах зображення на вкладці Положення (малюнок нижче), в поле Клас виберіть пункт Значення і задайте «art -lightbox »(без лапок).

Збережіть статтю і перевіряйте зміни.

Зазначу, що зараз на сайті збільшення картинок реалізовано так:

<P align = "center"> <a href = "/ images / stories / article / artisteer-4 / artisteer-4-1 / shablony-joomla.png" title = "Шаблони Joomla" onclick = "window.open ( ' /images/stories/article/artisteer-4/artisteer-4-1/shablony-joomla-b.png','Шаблони Joomla ',' width = 899, height = 671, left = '+ (screen.availWidth / 2 -449.5) + ', top =' + (screen.availHeight / 2-335.5) + ''); return false; "> <img class =" caption "src =" / images / stories / article / artisteer-4 / artisteer-4-1 / shablony-joomla.png "border =" 0 "alt =" Шаблони Joomla "title =" Шаблони Joomla "/> </a> </ p>

де «shablony-joomla.png» - це «мініатюра», а «shablony-joomla-b.png» - її збільшена версія. Після застосування Lightbox код буде наступним:

<P align = "center"> <img class = "art-lightbox" src = "/ images / stories / article / artisteer-4 / artisteer-4-1 / shablony-joomla-2-5.png" border = " 0 "alt =" Шаблони Joomla 2.5 "title =" Шаблони Joomla 2.5 "/> </ p>

але ніде в коді сторінки немає посилання на «shablony-joomla-b.png» - збільшену версію. Хоча все працює і при натисканні відкривається велика картинка «shablony-joomla-b.png». Я поцікавився у служби технічної підтримки веб-майстрів Яндекса по поводцов індексації збільшених версій картинок при реалізації Lightbox. Ось відповідь:

Ні, картіночний робот не знайде збільшену картинку, якщо її адреса явно не прописаний в коді.
На ранжування сторінок в пошуку це не вплине. Але на Яндекс.Зображення зображення можуть пропасти.

Для SEO, вважаю, що це не дуже добре.

Схожі матеріали

Корисні посилання: