caminho do tema no arquivo javascript

10

Eu preciso incluir o caminho para o meu arquivo de tema em um arquivo javascript. Como eu iria sobre isso? Eu já tentei:

var templateUrl = "<?php get_stylesheet_directory_uri(); ?>";

function LightboxOptions() {
  this.fileLoadingImage = "'"+templateUrl+"/img/loading.gif'";
  this.fileCloseImage = "'"+templateUrl+"/img/close.png'";
  this.resizeDuration = 700;
  this.fadeDuration = 500;
  this.labelImage = "Image";
  this.labelOf = "of";
}

Isso não me fornece o caminho, mas apenas insere <?php get_stylesheet_directory_uri(); ?> em vez do caminho real. Alguma ideia? Obrigado antecipadamente!

    
por charlenemasters 07.03.2013 / 11:48

6 respostas

25

O que você está procurando é função wp_localize_script .

Você o usa assim ao enqueing script

wp_register_script( 'my-script', 'myscript_url' );
wp_enqueue_script( 'my-script' );
$translation_array = array( 'templateUrl' => get_stylesheet_directory_uri() );
//after wp_enqueue_script
wp_localize_script( 'my-script', 'object_name', $translation_array );

No seu style.js, vai estar:

var templateUrl = object_name.templateUrl;
...
    
por david.binda 07.03.2013 / 11:59
5

Estas são as duas maneiras a seguir de adicionar o caminho do tema no arquivo javascript.

1) Você pode usar wp_localize_script () sugerido pelo wordpress em suas funções.php Arquivo. Isso criará um objeto Javascript no cabeçalho, que estará disponível para seus scripts em tempo de execução.

Exemplo:

wp_register_script('custom-js',get_stylesheet_directory_uri().'/js/custom.js',array(),NULL,true);
wp_enqueue_script('custom-js');

$wnm_custom = array( 'stylesheet_directory_uri' => get_stylesheet_directory_uri() );
wp_localize_script( 'custom-js', 'directory_uri', $wnm_custom );

e pode usar no seu arquivo js da seguinte forma:

alert(directory_uri.stylesheet_directory_uri); 

2) Você pode criar um snippet de Javascript que salve o diretório de modelo uri em uma variável e usá-lo mais tarde da seguinte maneira: Adicione este código no arquivo header.php antes do arquivo js no qual você deseja usar este caminho. Exemplo:

<script type="text/javascript">
var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
</script>

e pode usar no seu arquivo js da seguinte forma:

alert(stylesheet_directory_uri);
    
por Vinod Dalvi 07.03.2013 / 11:53
1

Você pode localizar seus arquivos javascript, o que lhe dá a oportunidade de gerar uma matriz javascript preenchida com valores definidos pelo PHP (como localização ou diretórios).

Se você carregar seu arquivo javascript com wp_enqueue_script ou wp_register_script , será fácil configurar da seguinte forma:

function localize_vars() {
    return array(
        'stylesheet_directory' => get_stylesheet_directory_uri()
    );
}

wp_enqueue_script( 'my_script', plugins_url( 'my_plugin/my_script.js' ), array( 'jquery' ) );
wp_localize_script( 'my_script', 'my_unique_name', localize_vars() );

E nos seus arquivos javascript, você pode chamar essas variáveis por:

my_unique_name.stylesheet_directory
    
por Mike Madern 07.03.2013 / 11:59
1

Foi assim que eu fiz.

Coloque o arquivo javascript e as imagens na pasta-tema / assets

Edite os seguintes arquivos.

em functions.php

/* for javascript (only when using child theme) */
wp_enqueue_script('my-script', get_template_directory_uri() . '-child/assets/test.js');
wp_localize_script('my-script', 'myScript', array(
    'theme_directory' => get_template_directory_uri() 
));

No seu arquivo javascript

var url = myScript.theme_directory + '-child/assets/';
    
por Takao Shibamoto 01.01.2017 / 09:46
0

Se o arquivo javascript for carregado a partir do painel de administração, você poderá usar essa função de javascript para obter a raiz da sua instalação do WordPress.

function getHomeUrl() {
  var href = window.location.href;
  var index = href.indexOf('/wp-admin');
  var homeUrl = href.substring(0, index);
  return homeUrl;
}

Em seguida, basta entrar em contato com o caminho para o seu tema, como abaixo.

var myThemePath = getHomeUrl() + '/wp-content/themes/myTheme';
    
por Jam Risser 14.06.2016 / 07:59
0

Comecei a usar este pequeno método conveniente para obter o diretório de temas do WordPress e armazená-lo como uma variável JavaScript global (tudo de dentro de um arquivo javascript):

function getThemeDir() {
    var scripts = document.getElementsByTagName('script'),
        index = scripts.length - 1,
        myScript = scripts[index];

    return myScript.src.replace(/themes\/(.*?)\/(.*)/g, 'themes/$1');
}
themeDir = getThemeDir();

Isso só funcionará se as condições a seguir forem atendidas:

1. Este snippet é executado por meio de um arquivo JavaScript externo - assim:

<script src="/wp-content/themes/themename/assets/app.js"></script>

2. O arquivo js reside no diretório do tema do seu site (ou subdiretório).

    
por blizzrdof77 12.08.2016 / 20:39