Fichas
Customize API WordPress
Fichas del conjunto (10)
- 1O que é a API de customização?É o local no WordPress onde podemos modificar nosso template sem a necessidade de codificar nada.
- 2Quais são as configurações padrão para adicionar nossas sessões, configurações e controladores no customize api?Primeiramente como na configuração de scripts e outras funções de WordPress, vamos criar a função passando o parâmetro $wp_customize:
function mytheme_customize_register($wp_customize) {
//Todas as nossas sessões, settings and controls go here
}
então adicionamos essas configurações ao customizer com:
add_action('customize_register', 'mytheme_customize_register'); - 3O que está contido no objeto "$wp_customize" que é passado como parâmetro de nossa função?Se dermos var_dump($wp_customize), veremos que nesse objetio está contido todas as configurações(settings), sessões(sections) e controladores(controlers) do nosso site.
Podemos dar var_dump de forma mais especifica para visualizar:
var_dump($wp_customize->controls())]
->settings();
->sections(); - 4Como fazemos para criar na customize API um modificador para inserir o titulo do site e as tags ?-Vamos precisar configurar um arquivo javascript, pois queremos que a nossa modificação seja feita em livrepreview(transport: postmessage;)
//Proximo flashcard
-Para que a configuração seja inserida em nosso site, vamos precisar adicionar no arquivo PHP da área do template que queremos modificar, adicionando, bloginfo('title') e bloginfo('description'); nos locais apropriados, por exemplo em front-page.php.
-Já em nosso arquivo functions.php vamos adicionar a nossa função base a configuração:
$wp_customize->get_section('title_tagline')->title="site name and description", 'wpthemecustomizer');
//se dermos var_dump em $wp_customize vamos ver a propriedade, 'title_tagline'->title com seu atual valor.
//Aqui modificamos o nome da sessão no admin customizer:
$wp_customize->get_control('blogname') -> label = __("site name", 'wptthemecustomizer') ;
// aqui mudamos a label do input box do customizer
$wp_customize -> get_control('blog description')->label = __('site description', 'wptthemecustomizer'); - 5Como configuramos essa modificação do site title e tags para atualizar em "live preview"?No arquivo functions.php, dentro da nossa função base, vamos adicionar:
$wp_customize->get_setting('blogname')->transport='postMessage';
$wp_customize->get_setting('blogdescription')->transport='postMessage';
já no arquivo js, vamos fazer com que essas configurações sejam feitas em live preview, *interessante lembrar que quando lidamos com scripts é necessário limpar o cache para remover eventuais problema.
//comandos para livre preview:
(functions($){
wpcustomize('bloginfo', function(value){
value.bind(function(to){
$('site-description').text(to);
});
});
})(jQuery); (no conflict WordPress) - 6Como fazemos para modificar o titulo da nossa home page e a label do front-page no customize API?Adicionamos esse comando a nossa função base:
$wp_customize->get_section('static_front_page')-> title = __('Home Page Preferences', 'wptthemecustomize');
também podemos alterar a priority;
$wp_customize->get_section('static_front_page')-> priority = 20;
//lembrar que devemos usar var_dump para saber o que podemos modificar.
Para alterar a label do front-page, vamos utilizar o comando:
$wp_customize->get_control('show_on_front')->label=__('choose home preference', 'wptthemecustomizer'); - 7Qual o procedimento para permitir modificações como alterar o background image ou configuração de cores?Primeiramente temos que adicionar o suporte para que os comandos sejam permitidos, então em nosso arquivo functions.php vamos:
add_theme_support();
//olha a documentação para ver quais parametros permitem o que.
//para o background, exemplo:
$defaults = array(
'default-color' -> '#efefef',
'default-image'-> get_template_directoy_uri() .'/images/background.png'
);
add_theme_support('custom-background', $defaults);
//Com o suporte a ferramenta habilitado, voltamos para nossa função basica do customizer, para adicionar as modificações que desejamos.
exemplos:
//Customizando o titulo da modificação, - no admin panel / customizar
$wp_customize->get_section('background_image')->title= __('background styles', 'wptthemecustomizer');
//mudando a sessão onde fica localizado a alteração de cores, de 'colors' para 'background_image' ;
$wp_customize->get_control('background_color')->section='background-image';
//Por padrão as mudanças efetuadas são visualizadas em live prew no background styles, pois wordpress opera no body_class, diferente de titlequenãoTEMF - 8Como fazemos para configurar no customizer api a alteração de "header images"?header images também vão demandar adicionar funcionalidade no:
add_theme_support()
//Para widgets e panels também vamos necessitar de um add_theme_support() com parametros, olhar na documentação.
//documentação para ver parametros.
exemplo header-image:
$defaults = array(
parameters
wp-head-callback => 'wpt_style_header';
);
add_theme_support('custom-header', $defaults);
//utilizando a função que foi passada como parametro em $defaults.
function wpt_style_header() {
if(get_header_image() != "") : //aqui verificamos se há alguma imagem no upload.
então podemos chamr a div da imagem e a função:
// para utilizarmos a imagem do upload.
//podemos ver essas informações em custom_header.
}
configurações no javascript:
wp.customize('header_textcolor', function(value)) {
value.bind(function(to){
if('blank === to') {
$('.site-title').css({
'clip': 'react(1px, 1px, 1px, 1px)'
'position' : 'absolute'
}
else {
$('.site-title').css({
'clip': 'auto',
'position': 'static'
})
}
} - 9Como criamos nossas customizações proprias no admin-area do WordPress?Todas as molificações anteriores já são padrão em WordPress, para criar nossas próprias vamos ter que criar nosso panel, sessão e settings.
//Adicionando um logo uploader
//add logo customizado:
$wp_customize->add_section('custom_logo'), array(
'title' => __"change your logo", 'wptthemecustomizer'
),
'panel' => design_setting,
'priority=> 20'
);
$wp_customize->add_setting(
'wpt_logo'
array(
'default'-> get_template_directory_uri(). '/images/logo.png')
);
$wp_customize->add_control(
new wp_customize_image_control(
$customize,
'custom-logo',
array(
'label'->__('change logo', 'wptthemecustom'),
'section-> 'custom_logo''
'setting'-> 'wpt_logo',
'context'-> 'wpt_custom-logo'
);
)
No arquivo index.php, onde queremos que a logo seja inserida, vamos inserir o codigo:
)
//se o wpt_logo is not blank, then:
para usar uma configuração customizada temos que adicionar em functions.php:
get_theme_mod('settings_id'); - 10Como fazemos para criar uma função em javascript que permina que esse logo criado no customizer possa ser atualizado em live preview?//Fazemos em nossa função padrão o logo atualizar com 'transport = postMessage';
$wp_customizer->add_settings(
'wpt_logo',
array(
'transport' -> 'postMessage'
)
);
//No arquivo JavaScript:
note que wpt_logo é o SETTING_ID
wp.customize('wpt_logo', function(value) {
value.bind(function(to){
if(to == '') {
$('#logo').hide();
} else {
$('#logo').show();
$('#logo').attr('src', to);
}
});
});
})(jQuery);
**Quando criamos uma customize admin-area function, precisamos utilizar o sanatize() na entrada, para garantir a segurança no banco de dados.
sanatize_text_field();
add_settings();
Información
- Descripción
- asa (WordPress ) Technical Skills Fichas sobre Customize API WordPress, creado por Victor Bini el 07/11/2016.
- Creado por
- Victor Bini
- Visitas
- 2
- Valoración