wordpress在每个帖子上运行javascript代码

Question

I am developing a website and I created a js script that creates side menu for me.

It reads all the headings and creates scroll menu.

It works perfectly the problem that I am facing now is that I have to call the js function on every post page. Since I'll have lots of posts on my web page this could be a bit time consuming. Any way to make my script load automatically every time a post is being shown on web page?

My code if anyone is interested is bellow:

 function create_navigation() { allid = []; //tabela z vsemi id ji, ki morajo biti v meniju elements = document.getElementsByTagName("h1"); for (var i = 0; i < elements.length; i++) { if (elements[i].id != "") { allid.push(elements[i].id) } } elements = document.getElementsByTagName("h2"); for (var i = 0; i < elements.length; i++) { if (elements[i].id != "") { allid.push(elements[i].id) } } for (var i = 0; i < allid.length; i++) { var table = document.getElementById("qweqwe"); var row = table.insertRow(i); var cell1 = row.insertCell(0); cell1.innerHTML = "<a href=\\"#" + allid[i] + "\\" class=\\"_ps2id _mPS2id-h mPS2id-highlight mPS2id-highlight-first mPS2id-highlight-last\\" data-ps2id-offset=\\"\\">" + document.getElementById(allid[i]).innerHTML + "</a>"; } } 

Currently I call the function create_navigation on every post page that I want it to appear.

Also is this the correct way of doing this? I am kinda inexperienced in Wordpress and had time coming with better idea of dynamically creating side menu.

Answer 1

The best solution would be to add this code to the themes JS file. That way it's loaded on every page load.

If there isn't a JS file in the theme, just create one:

1.Create file, ie. scripts.js

2.Place it in themefolder/js/

3.Add this to themes functions.php (located in theme root folder)

function theme_scripts() {
    wp_enqueue_script( 'theme-js', get_theme_file_uri( '/js/scripts.js' ), array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

Answer 2

If you use theme which allows adding custom code, just use those options.

If not, you can simply use html block on sidebar and add your script there.

Go to http://Your-site.com/wp-admin/widgets.php and add simple HTML widget to sidebar, then add your js inside it and save. Make sure your sidebar is visible on every page though. Or just place widget in different location, which is visible on every page.