ajax σε wordpress custom page

[greeker]

έχω ξεκινήσει μια εφαρμογή για wordpress σε php. Είδα ότι ο πιο ενδεδειγμένος τρόπος για να ενσωματωθεί στο περιβάλλον είναι φτιάχνοντας ένα custom page template στο οποίο ξεκίνησα με τον εξής βασικό κώδικα:

<?php
/*
Template Name: Πρόγραμμα
*/
?>
<?php get_header(); ?>

<div id="primary" class="site-content" style="width: 100%">
<div id="content" role="main">

</div><!-- #content -->
</div><!-- #primary -->
 

η εφαρμογή μου έχει κάποια κουμπιά που λειτουργούν ως "καρτέλες" ή ως πλοήγηση αν θέλετε.

 

Η ιδέα είναι να πατάς στο κουμπί1 και να εμφανίζεται από κάτω αντίστοιχα κάποιο περιεχόμενο, στο κουμπί 2 άλλο κλπ. Βασικά κάθε κουμπί φορτώνει ένα άλλο php αρχείο και το εμφανίζει μέσα σε ένα div που έχω ορίσει εγώ.

<a onclick="$('#main_content').load('./file1.php');">Καρτέλα1</a>
<a onclick="$('#main_content').load('./file2.php');">Καρτέλα2</a>
<a onclick="$('#main_content').load('./file3.php');">Καρτέλα3</a> 

το έχω ξανακάνει αυτό και λειτουργεί μια χαρά από μόνο του. Μέσα στο wordpress όμως όχι. 

Αυτό που κατάφερα να λειτουργήσει στο wordpress είναι το εξής:

<script type="text/javascript">
function change_main_content(select)	{
	switch (select)	{
		case (1):
			document.getElementById('my_main_content').innerHTML = document.getElementById('div1').innerHTML;
			break;
		case (2):
			document.getElementById('my_main_content').innerHTML = document.getElementById('div2').innerHTML;
			break;
		case (3):
			document.getElementById('my_main_content').innerHTML = document.getElementById('div3').innerHTML;
			break;
	}
}
</script>

<table style="border:0;">
<tr>
	<td><a onclick="change_main_content(1);">Καρτέλα1</a></td>
	<td><a onclick="change_main_content(1);">Καρτέλα2</a></td>
	<td><a onclick="change_main_content(1);">Καρτέλα3</a></td>
</tr>
</table>


<div id="div1" style="display:none;">
<? include 'file1.php' ?>
</div> <!--#div1 -->

<div id="div2" style="display:none;">
<? include 'file2.php' ?>
</div> <!--#div1 -->

<div id="div3" style="display:none;">
<? include 'file3.php' ?>
</div> <!--#div1 --> 

αλλά αυτό δε βολεύει ιδιαίτερα. 

 

Ξέρει κανείς πως θα κάνω τον κώδικα ajax να δουλέψει;