Завантажити шаблон соціальної мережі. Шаблони для соціальної мережі на WordPress
Привіт, шановні читачі блогу сайт. Можна, звичайно ж, і плагін для цього завдання використовувати, але зробити самому не так вже й складно, Та й буде менше, тим більше, що їх у мене і так досить багато трудиться (див. Статтю за посиланням). Іконки соцмереж я взяв з, про який вже досить докладно писав (сподіваюся, що Дімокс проти цього заперечувати не буде).
А також я порахував доречним і по емайл.
Створюємо спрайт з кнопок і вставляємо Html код на сайт
Після того, як всі потрібні групи і сторінки в соцмережах ви створили, а значить отримали всі необхідні посилання, можна перейматися додаванням кнопок на сайт. Можна, звичайно ж, відповідно до мого постом про, підібрати для кожної соцмережі відповідну іконку і при необхідності зменшити її розмір до необхідного в і.
Але це не є найкращий варіант. Чому? Ну, тому що для подгрузки кожної картинки соцмережі буде здійснюватися окремий запит до вашого сервера. Буде у вас десяток іконок - значить десять запитів, які по-любому будуть створювати додаткове навантаження на сервер і. Нам таке марнотратство не підходить, тим більше, що вже давно.
Я вирішив не винаходити велосипед (створювати спрайт), а використовував той, що створює конструктор Шаре42 (посилання на опис роботи з ним наведена трохи вище). У ньому можна вибрати ті соцмережі, іконки яких вам будуть потрібні, і разом з кодом ви отримаєте CSS спрайт, тобто фізично один графічний файл, на якому будуть розміщені всі потрібні вам іконки соцмереж і підписки на RSS стрічку (і Емайл, якщо буде потрібно).
Я вибрав чотири основних мережі і пару іконок для підписки на новини з розміром іконок 24 на 24, тому мій спрайт виглядає так (, правда, туди ще затесався, але це не біда):
Тепер у нас є всі інгредієнти - посилання на групи або сторінки соцмереж і іконки для їх відображення на сайті. Залишилося все це тільки правильно приготувати, тобто зверстати. Мій блог працює на WordPress, тому код з кнопками я буду вставляти в один з. У моєму випадку він називається sidebar.php. Html код при цьому виходить украй простий:
Ну, і найцікавіше. За допомогою ми визначаємо, яка саме область нашого спрайту буде відображатися на даному конкретному місці в вигляді фону (в нашому випадку цей фон підкладається під гіперпосилання). Пояснювати як так виходить дуже довго, тому читайте наведену за посиланням статтю і все стане зрозуміло (там і наочні приклади наводяться). Якщо лінь, то просто поекспериментуйте з цифрами, які, як ви могли помітити, не дарма кратні 24.
Так, файл спрайту залийте по ФТП на свій сайт і вкажіть в background до нього шлях (). От і все. Якщо не вийде, що читайте уважніше матеріали за наведеними вище посиланнях, ну, а якщо зовсім вже нічого не вийде, то потрібно описувати вашу ситуацію в коментарях (подробненько - для вставки коду на забудьте його в теги PHP укласти з квадратними дужками).
Удачі вам! До швидких зустрічей на сторінках блогу сайт
Вам може бути цікаво
Ви знали, що 40% користувачів залишають сайти з поганим дизайном? Навіщо втрачати прибуток? Виберіть і встановіть прямо зараз один з 44 тисяч преміум шаблонів для сайтів.Ідеальний вибір для вашого бізнесу!
Соціальна мережа - потужний інструмент маркетингу, з яким ви зможете збирати інформацію про потенційних клієнтів. Оптимальною платформою для створення такого сайту ми вважаємо Вордпресс. Ми і самі користуємося їй - наш сайт працює на шаблоні Koala. Його ми купили за 49 $, і за цю ціну ми отримали готовий сайт з усіма функціями, які нам були потрібні. І він нас ще жодного разу не розчарував.
Нам часто пишуть: «Порадьте шаблони соціальних мереж». Просили - будь ласка. Для вас ми підготували свіжу добірку преміум шаблонів WordPress для цих цілей, щоб ви змогли вибрати для себе найкращий шаблон соціально мережі. Можна, звичайно, знайти і безкоштовний шаблон соціальної мережі, але ми все ж настійно рекомендуємо вибрати саме платний шаблон соціально мережі. Такі шаблони створюють досвідчені розробники. При створенні дизайну особлива увага приділяється деталям. Шаблони проходять жорстку перевірку на роботу з плагінами, надійність і швидкість завантаження сторінок, чого не скажеш про безкоштовні шаблонах.
Завантажити шаблон соціальної мережі ви можете, натиснувши на кнопку «Відкрити Детальніше / Завантажити» під вподобаним шаблоном і купивши його на майданчику Themeforest.
Шаблони соціальної мережі WordPress 2017
Kleo - багатозадачна тема для створення спільноти
У комплекті є декілька готових демо-сторінок. Для настройки сайту є інструмент WP Customizer з підтримкою режиму Live Preview.
Доступна реєстрація через Facebook. Підтримуються повідомлення в реальному часі і рядок пошуку Ajax. Плагін rtMedia дозволить користувачам додавати медіафайли. Є багато красивих іконок. Можна додавати контактні форми і плани членства.
Klein - шаблон сайту соціальної мережі і спільноти
Klein - шаблон WordPress з повноцінною підтримкою преміум плагінів BuddyPress, bbPress і WooCommerce. Завдяки цьому ви зможете створити сайт будь-якої спільноти (форум або соціальну мережу) з функцією інтернет-магазину.
Користувачі можуть додавати будь-яку фотку на задній фон свого профілю чи спільноти. Вони зможуть обмінюватися будь-якими медіафайлів завдяки плагіну rtMedia. Підтримується онлайн-повідомлення про нові повідомлення, заявках в друзі та інші події. Доступна реєстрація через Facebook або Google. Плагін Paid Membership Pro дозволяє організувати платну підписку або членство.
NRGnetwork - крутий шаблон соціальної мережі для WordPress
NRGnetwork орієнтований на створення соціальної мережі-портфоліо типу Behance. З його допомогою користувачі зможуть створювати і ділитися портфоліо, створити колекцію портфоліо, підписуватися на інших авторів і відправляти повідомлення.
Сайт можна створити вручну з Visual Composer і Revolution Slider (для слайд-шоу). Є готові сторінки для списку авторів і проектів, сторінки окремих проектів, призначені для користувача сторінки, сторінки для блогу, реєстрації та входу.
У своєму профілі можна стежити за статистикою. Підтримуються лайки, шеринг і система коментарів. Можна додати відео на задній фон і карту Google.
TIGER - шаблон соціальної мережі для компаній і професійних виконавців
Отже, шановні початківці веб-майстри, ми познайомилися з основами HTML.
Тепер давайте, застосувавши ці знання, швиденько зробимо собі невеликий сайт і викладемо його в інтернет.
Правда повноцінний ресурс, із застосуванням одного лише html, зробити важко, але ось сайт-візитку з декількох сторінок, цілком можливо.
Якщо у кого-то саме він і є метою, і немає бажання вивчати інші мови програмування, то ця стаття для них.
Коротше, в самопісний виконанні, без використання CMS, простіше вже нічого не існує.
А для тих кому потрібно щось по крутіше, в кінці статті є посилання на статті з кодом блочного шаблону, з використанням CSS, і кодом динамічного сайту з використанням PHP.
Сайт на чистому html зробимо прямо на цій сторінці, так би мовити - сайт в сайті, цілком робочий і готовий до заповнення контентом.
Розділимо весь процес на три частини.
1. Створення директорії сайту на своєму комп'ютері.
2. Створення сайту.
3. Переклад сайту з нашого компа на хостинг, тобто в інтернет.
Створення директорії сайту на своєму комп'ютері
Перший пункт найпростіший. Про те як створити директорію дуже наочно показано в статті (всі посилання з цієї сторінки відкриваються в окремому вікні, щоб не загубитися).
А що, і в яку папку покласти, я детально покажу після коду головної сторінки, щоб вже було з чим йти в директорію.
Потім приступимо до другого пункту, самого творчого.
Створення шаблону сайту
Для створення шаблону потрібно редактор, в який потрібно буде вставити наведений нижче код.
Це може бути як простий віндовскій Блокнот, так і будь-який інший текстовий редактор.
За основу шаблону візьмемо багатошарову таблицю HTML. Раніше, до появи CSS всі сайти писалися таблицями, тепер же більш популярною стала блокова верстка.
Але і досі, таблична структура не застаріла і з успіхом застосовується.
Наприклад інвестиційна CMS H-script зі складним функціоналом, цілком зверстаний на основі таблиць.
Отже, ось такий сайт, з мінімальним оформленням.
Як надалі оформляти таблиці, дуже докладно показано в статті.
|
<! - Створюємо таблицю контейнер, якій задаємо наступне
оформлення:
border \u003d "1" - рамка навколо контейнера. Збільшивши число, можна збільшити товщину рамки.
align \u003d "center" - розміщуємо контейнер по центру екрана.
rules \u003d "rows" - прибираємо подвійну рамку.
style \u003d "width: 60%;" - додаємо стильове властивості, що робить
контейнер і весь сайт "гумовим".
Зробити повноцінний адаптивний дизайн, цим способом неможливо .-->