Весь интерфейс находится в меню view
- Показать/скрыть эксплорел Ctrl+k+b или просто перетянуть в редактор папку
- Открытие файла по имени Ctrl+p
- Все возможные команды Ctrl+Shift+p
- Комментирование однострочный Ctrl+/, многострочный Ctrl+Alt+/
- Множественные курсоры Ctrl+D (после выделения слова)
- Дублирование строк Shift+Ctrl+G
- Поиск и замена Ctrl+H
Установка плагина вордпресс. Сначала устанавливаем sublime package control
там копируем текст и в командной строке sublime добавляем его в консоли Ctrl+`
и у нас установится sublime package control, дальше уже нажимаем ctrl+shift+p у нас запустится окно с командами sublime и там мы вводим install и выбираем install Package
у нас появится целый список доступных плагинов которые можно установить и там уже выбираем что мы собираемся устанавливать.
посмотреть установленные плагины можно командой list Package
После установки плагина wordpress комбинации доступные.
<?php theloop — нарисует полностью цикл wordpress
Получить описание темы в файле css вводим theme_head
Настройки:
- перенос по строкам «word_wrap»: «true» прописываем в файле настроек, по умолчанию там стоит auto
темы вордпресс должны состоять минимум из двух файлов index.php и style.css
Добавление screenshot к теме »
сделайте скриншот вашей темы и добавьте файл в папку с вашей темой с названием screenshot.phg и у вас появится в самом вордпрессе скрин вашей темы
Небольшой примерчик использования функций-тегов вордпресс »
файл index.php темы
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<html> <head> <title><?php bloginfo("name"); ?></title> </head> <body> <!-- названия сайта --> <h1><?php bloginfo("name"); ?></h1> <!-- краткое описание --> <?php bloginfo("description"); ?> <br> <!-- получаем ссылку на главную страницу --> <a href="<?php echo home_url(); ?>">Главная страница</a> <br> <!-- получаем путь к теме --> <?php bloginfo("template_url"); ?> <br> <!-- получаем файл стилей темы style.css --> <?php bloginfo("stylesheet_url"); ?> <hr> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h3><?php the_title() ?></h3> <!-- выводит контент --> <?php // the_content(); ?> <!-- выводит цитату, если ее нету, то просто n символов --> <?php the_excerpt(); ?> <!-- возвращает ссылку на пост --> <a href="<?php the_permalink(); ?>">Читать полностью</a> <?php endwhile; ?> <!-- post navigation --> <?php else: ?> <!-- no posts found --> <?php endif; ?> <hr><hr> <?php // в $post содержатся данные последней записи var_dump($post); echo "<br><br>"; // в $posts содержатся данные всех постов // которые должны вывестись на странице // с учетом пагинации - сколько их должно // выводится на страницу var_dump($posts); echo "<br><br>"; foreach ($posts as $key => $value) { echo "<h3>".$value->post_title."</h3>"; echo $value->post_excerpt."<br>"; echo $value->post_content."<br>"; } ?> </body> </html> |
получить путь к папке с темой wordpress »
используем функцию
1 |
<?php bloginfo('template_url'); ?>/ |
и добавляем в конце слешь, например подключить css мы можем следующим образом
1 |
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/style.css"> |
и javaScript от так
1 |
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/test.js"> |
- header.php — шапки
- footer.php — подвал
- sidebar.php — боковая панель
- function.php — файл функций обеспечивающий работу нашей темы
Просто приведу файлы, в них все закомментировано
функции wordpress которые использовали:
- get_header(),get_sidebar(), get_footer() — функции подключают стандартные файлы, если без параметров, а с параметрами хз. наверно те что передаем
- wp_head(); — подключается в файле header.php, ее нужно подключать перед тегом </head>, этот файл вроде за плагины отвечает или хз.
- wp_footer(); — подключается в файле footer.php в самом конце, как бы в самом конце перед </body>, а этот файл вроде подключает панель администратора, что появляется вверху когда мы авторизованы на сайте
- bloginfo(‘name’);/*название сайта*/ wp_title(); /*название страницы*/ ?> — эти функции возвращают название сайта и wp_title — название для страниц, для главноей страницы названия не будет.
- home_url(); /*ссылка на главную страницу сайта*/ ссылка на гавную страницу сайта
index.php
1 2 3 4 5 6 7 8 |
<!-- подключаем стандартный header --> <?php get_header(); ?> <div class="content">content </div> <!-- стандартный сайдбар --> <?php get_sidebar(); ?> <!-- стандартный футер --> <?php get_footer(); ?> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
/* Theme Name: Theme Name Theme URI: http://example.com/ Description: Description Version: 1.0 Author: Your Name Author URI: http://example.com/ Tags: one, two */ /*Зброс*/ *{ margin: 0px; padding: 0px; } body{ font-size: 25px; margin:0px; padding: 0px; /*background: #113333;*/ } .container{ background: #00ff00; max-width: 900px; margin: 10px auto; } .header{ background: #ff0000; height: 150px; } .nav{ background: #f0f; } .content{ background: #00f; min-height: 200px; width: 70%; float: left; } .right-menu{ background: #ccc; height: 100px; width: 30%; float: right; } .footer{ background: #f00; height: 100px; clear: both; } |
header.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css"> <title><?php bloginfo('name');/*название сайта*/ wp_title(); /*название страницы*/ ?></title> <!-- Обязательная строка в любой теме вордпресс --> <?php wp_head(); ?> </head> <body> <div class="container"> <div class="header"> <a href="<?php home_url(); /*ссылка на главную страницу сайта*/ ?>">Главная</a> </div> <div class="nav">nav</div> |
footer.php
1 2 3 4 5 6 |
<div class="footer">footer</div> </div> <!-- Обязательная строка в любой теме вордпресс --> <?php wp_footer(); ?> </body> </html> |
sidebar.php
1 |
<div class="right-menu">right-menu</div> |
И на выходе у нас получится от такая картинка
Подключение файлов CSS и скриптов Javascritp в wordpress »
Используемые функции
- wp_enqueue_scripts — стандартная функция вордпресс на которую мы цепляем через хук свою собственную функцию для подключения скприптов
- wp_enqueue_script и wp_enqueue_style функции вызываются из своей собсвтенной функции и в качестве параметров передаются названия файлов и путь к подключаемым файлам (wp_enqueue_style(‘style’, get_template_directory_uri().’/style.css’);)
- get_template_directory_uri() — возвращает путь в виде переменной к папке с темой
- add_action — так называемый хук действий.
Подключать файлы CSS и JavaScript нужно псециальным способом, чтобы небыло конфликтов, для этого создаем файл functions.php — это файл в котором создаются функции для нашей темы. Дальше в этом файле создаем хук действия add_action для функции wordpress wp_enqueue_scripts и к ней добавляем нашу собственную функцию под названием load_style_script
Таким способом можно подключать несколько скриптов и файлов css вызывав соответственно несколько раз для каждого скрипта функции wp_enqueue_script или wp_enqueue_style 🙂
вот файл function.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php /** * загружаемые стили и скрипты **/ //наша собственная функция function load_style_script(){ // специальная функция для подключения скриптов // где myscript - это название скрипта, а // get_template_directory_uri().'/js/myscript.js' - это // путь к скрипту wp_enqueue_script('myscript', get_template_directory_uri().'/js/myscript.js'); // специальная функция для подключения css // аналогично, что означают параметры смотрим выше. wp_enqueue_style('style', get_template_directory_uri().'/style.css'); } /** * загружаем стили и скрипты **/ // это наш собственный хук, который на функцию вордпресс // wp_enqueue_scripts цепляет нашу собственную функцию load_style_script add_action('wp_enqueue_scripts','load_style_script'); ?> |
вот скрин где находятся наши файлы
вот что у нас в файле header.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <title><?php bloginfo('name');/*название сайта*/ wp_title(); /*название страницы*/ ?></title> <!-- Обязательная строка в любой теме вордпресс --> <?php wp_head(); ?> </head> <body> <div class="container"> <div class="header"> <a href="<?php home_url(); /*ссылка на главную страницу сайта*/ ?>">Главная</a> </div> <div class="nav">nav</div> |
как видно ни скрипты ни другие файлы у нас не подключаются, если мы глянем на исходный html код, страницы, то там у нас все подключилось
Вот так в общем подключается.
Добавление поддержики миниатюр в теме wordpress »
в файле functions.php вашей темы добавте следующий код
1 2 3 4 |
/** * Добавление миниатюры к теме **/ add_theme_support('post-thumbnails'); |
все и у вас появится в админке форма для добавления миниатюры
Добавляет возможность создания меню в теме »
добавляем следующий код в файл functions.php
1 2 3 4 5 |
/** * регистрация меню **/ // первый параметр идентификатор, второй описание меню register_nav_menu('menu','Меню'); |
и у нас появляется подпункт «меню» в админской панели, где мы можем редактировать наше меню