Lägga in javascript-script i WordPress parentheme

Leta efter sektionen i functions.php där script läggs till. Det kan se ut såhär.

function resonate_scripts() {
	wp_enqueue_style( 'resonate-style', get_stylesheet_uri() );

	wp_enqueue_script( 'resonate-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

	wp_enqueue_script( 'resonate-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

/* Här är mitt eget script so jag har lagt till. Det är baserat på jQuery det är därför som jquery finns i arrayen */
	wp_enqueue_script(
		'animations',
		get_stylesheet_directory_uri() . '/js/script.js',
		array( 'jquery' )
	);


	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'resonate_scripts' );

Gör ditt eget tema i WordPress med hjälp av underscores

Så du vill göra ditt eget tema. Komma ifrån alla förgjorda skitteman som är jättesvåra att anpassa. Då har du kommit rätt. Jag ska visa hur man går till väga för att skapa sitt eget tema.

1. Ladda ner DesktopServer och installera det. Det behövs för att du ska kunna utveckla ditt tema lokalt på din dator. Utan tillgång till internet, en server eller databas. DesktopServer emulerar server och databas på din lokala dator. Smidigt.

2. Gå till underscores och ladda ner deras template. Det innehåller alla grundläggande wordpress-filer. Och alla grundläggande wordpress-hooks.

Statisk förstasida

3. Om du vill göra en statisk förstasida kan du göra det enkelt. Du kopierar bara index.php och döper om filen till static-page.php. Nu kommer static-page.php att laddas innan index.php laddas. Läs mer om detta vilka filer som laddas när i wordpress guide till template hierarchy.

Lägga till bootstrap i wordpress

Detta är för att lägga till bootstrap i ett parent-theme i WordPress.

function my_scripts_enqueue() {
    wp_register_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js', array('jquery'), NULL, true );
    wp_register_style( 'bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css', false, NULL, 'all' );

    wp_enqueue_script( 'bootstrap-js' );
    wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Under konstruktion-sida i WordPress

Ibland kan det vara bra att ha en sida som säger att din sida är under konstruktion eller, sätta sidan i Maintenance-mode ifall du måste ändra å fippla med saker. Det enkla sättet att göra det i WordPress är genom att ladda ner pluginen: WP Maintanence Mode

Där kan du sedan välja bakgrund, om du vill ha en nedräknare å så vidare. Sidan syns dock inte när du är inloggad vilket innebär att du kan arbeta med sidan samtidigt.

Hur man lägger till fler css-filer i en WordPress Child Theme

Du vill alltså lägga till flera css-filer i din wordpress child theme.


add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); //Detta är css-filen i ditt parent-theme.
        wp_enqueue_style( 'hittaPaEttNamn', get_stylesheet_directory_uri() . '/css/animations.css' );/*Där det står hittaPaEttNamn kan du själv skriva in ett namn på css-filen. Glöm inte att det ska vara get_stylesheet och inte template. Detta är för att filen finns i child-temat.*/
}

Hur man lägger till javascript-fil in en wordpress child

WordPress har redan jQuery inbyggt, så du behöver bara lägga till ditt script.

1. Gå till child-temat och gå in i filen functions.php.
Lägg där till följande kod.

function add_my_script() {
wp_enqueue_script(
'myscript', // namnge ditt script.
get_stylesheet_directory_uri() . '/js/myscript.js', // lagg till korrekt adress och namn pa skriptet
array('jquery') // this array lists the scripts upon which your script depends
);
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Anledningen till att det är get_stylesheet_directory_uri() och inte get_template_directory_uri() är för att detta är ett child-tema. Om det inte hade varit då, då skulle du använt get_template_directory_uri().

2. Lägg nu till namnet och korrekt adress till. I det här fallet heter skriptet myscript.js och ligger i mappen js, därför är det korrekt att skriva “/js/myscript.js”.

3. Notera att i ditt script så kan du inte använda $, istället bör du använda ordet “jQuery”. Här är ett exempel på ett skript och hur det bör se ut om det används i wordpress.


jQuery(document).ready(function(){
jQuery("img").click(function(){
jQuery("img").fadeOut("fast");
});

});