This is a fantastic resource and I have been using it extensively during my first website developing project.
I have static webpages that I want to maintain static but introduce WordPress (already installed and running on a /blog/ subdomain) onto the static homepage within a specified div. I found the code:
<script typ="text/javascript">
$(document).ready(function(){
$("#randomdiv").load("load.php");
});
</script>
Which I modified from "#randomdiv" to "#myblog" and "load.php" to the "blog/index.php" file that WordPress added. I'm also specifying that I want #content from index.php.
<script typ="text/javascript">
$(document).ready(function(){
$("#myblog").load("blog/index.php #content");
});
</script>
<div id="myblog" class="grid_8">
"Loading..."
</div>
The kicker: it worked for about an hour last night. I was styling the php in the CSS for my static page and it stopped working! I have cleared everything and started over but no luck. Where am I going wrong???
--Thank you for your responses--
Maybe someone can quickly and easily explain to me how .php works. WordPress gives me about 15 .php files inside /blog/ and I assumed index.php was my ticket, but maybe not. Still, lat night this worked. I posted a new post and it appeared, I was styling it and everything. Something has shifted and I can't find it.
WordPress was placing my index.php at http:/ / ... com/blog/index.php instead of http:/ /www ... com/blog/index.php.
I went into my WordPress dashboard, navigated to settings, and changed WordPress address (url) and site address (url) to include "www".
Try $('#myblog').load('blog/index.php'). I you only need the #content element from the HTML loaded - consider requesting an another url that will return only the part of HTML code you need.
Also, probably, you broke your HTML when styling it, so jQuery does not find the #content element when HTML it is loaded with .load function - then it does not (and should not) show any error messages.
Related
This is a bit of a follow on from this question/answer: https://stackoverflow.com/a/4152528/348922
I'm simply not sure how to apply this to my situation (if it's at all possible).
I have a container div that when a button is clicked a file is loaded into the div via jquery:
var root = location.protocol + '//' + location.host;
$(".button-book").click(function(e) {
e.preventDefault();
$('#container').load(root+'/loaded-file.php');
});
Fine. BUT that file has a number of text strings that I need wrapped in php in order to hook into them for translation purposes (using WPML plugin for Wordpress):
<?php _e('Arrival Date', 'mywptheme'); ?>
<?php _e("Day", 'mywptheme'); ?>
<?php _e("Month", 'mywptheme'); ?>
<?php _e("Year", 'mywptheme'); ?>
// etc...
Obviously this doesn't work when the file is loaded dynamically. Is it at all possible or am I completely wasting my time?
Your issue is that _e(...) is a wordpress function, so when this file (loaded-file.php) is executed outside of wordress, it does not work. Its not actually anything to do with jquery - if you visit the file directly in your browser it wont work either.
Simply add the following to the top of loaded-file.php:
require($_SERVER['DOCUMENT_ROOT'].'/blog/wp-blog-header.php');
Adjust for your actual wordress location, in the above case wordpress is in domain.com/blog/
I need some help to better understand SEO with ajax loaded content.
Here the context:
I have a single.php where content is dynamically generated (with php and an xml database) for each single post.
I load a container of this single.php inside my index.php page via ajax.
Here the working script:
$.ajaxSetup({cache:false});
$(".phplink").click(function(){
var post_link = $(this).attr("href");
window.location.hash = "!"+ post_link ;
$("#ajaxify_container").html("loading...");
$("#ajaxify_container").load('single.php?blog_no='+post_link+' #container');
return false;
});
$(window).hashchange( function(){
var hash = window.location.hash;
var hash = location.hash.replace("#!","");
if(hash != '') {
var post_link = hash;
$("#ajaxify_container").html("loading...");
$("#ajaxify_container").load('single.php?blog_no='+post_link+' #container');
}
else {
$.get(hash, function (data) {
$("#ajaxify_container").html('');
});
}
});
$(window).hashchange();
An example of a link in index.php (when I click on a link I've got in url website.com/#!12) :
<a class="phplink" href="12">Post 12</a>
And in my .htaccess file I added this lines to rewrite properly the url:
Options +FollowSymLinks
RewriteEngine on
RewriteRule /([0-9]+)$ /single.php?blog_no=$1
Everything works fine... (by the way, my single.php is SEO friendly "alone" and works without javascript)
However, by using ajax like this, with dynamic php page, is it still SEO friendly?
I know that ajax is difficult to be crawled. What is the best way to have a good (not the best, something correct) SEO with ajax content?
Regarding the structure of the link, I don't fully understand what google bot will crawl.
Because of the href="12", so the dynamic href="/single.php?blog_no=12".
In the web browser :
website.com/single.php?blog_no=12 and website.com/12 load only my single.php page
website.com/#!12 load my index.php page with a container loaded from website.com/single.php?blog_no=12
Of course I only want that google crawls the hashbang url...
(EDIT: if I open the link in a new tab with right click, it loads the single.php (that I don't want). It seems to be a normal behavior but...I want to prevent it)
Sorry for my English, I'm French.
Dynamically loaded content is generally hard to get right from an SEO perspective. Your description is a little confusing, but I think I have an idea of what you're looking for.
First of all, there are mainly two ways with which Google finds out about pages on your site:
A Sitemap (Google likes XML sitemaps) - A file that tells Google every page on your site to index
Links - Google will follow any internal link on pages it tries to index unless they are marked with rel="nofollow"
There's also links in and some other stuff, but for the purposes of this explanation...lets ignore those.
Anyway, unless you're explicitly telling Google that website.com/single.php?blog_no=12 exists, it's going to have a hard time finding it. To be honest, I'm not sure how Google will handle something like href="12", it may try to follow that link to website.com/12 which may effect your ranking if there is nothing there. So in the end, you might want to add rel="nofollow" to your AJAX trigger links.
A good way to handle AJAX and dynamically loaded content is to make sure fallbacks are in place, for example if you have something like href="single/12 set up to load some content with AJAX, you should also have a fallback page that doesn't use JS/AJAX. This ensures that both search engine bots, and users without Javascript can see that content if it otherwise wouldn't have been visible anywhere else.
Last small tidbit, if you test your links on something like http://www.dnsqueries.com/en/googlebot_simulator.php and they turn up with errors, or blank pages (search engine bots don't use javascript) you should nofollow those links, or setup fallback pages
Nevermind...this is the last thing. You should go a couple steps further with your htaccess rewrite to make your URLs completely clean of query strings. For example website.com/single/blog/12 is better than website.com/single.php?blog_no=12 for both SEO and users.
In my new website I have a logo that when clicked should return visitors to the home page. But instead it returns the 404 error page. The code for this in header.php is this:
<div id="branding">
<img src="<?php bloginfo('template_directory'); ?>/images/brandlogo.svg" alt="Luchtspin">
</div>
Why is this happening? In footer.php I use exactly the same link and there I experience no troubles:
all content © <?php echo date("Y"); ?> <?php bloginfo( 'name' ); ?>
Background info: the original theme used is Rostar (http://wpdemo.dannci.com/preview/customfields?wptheme=Rostar). I redesigned it, made it translatable and eventually married it to the Boilerplate/Starkers theme (http://wordpress.org/extend/themes/boilerplate). Adventurous, I know. Especially since I am new to PHP.
Additional info: the wordpress-site is located in a subdirectory. I followed the steps indicated here: codex.wordpress.org/Giving_WordPress_Its_Own_Directory to set it up correctly.
Link to the site: http://www.luchtspin.nl
Something strange I noticed at the same time: the h1 'Luchtspin' (next to the logo) acts like a link, although it is not a link anymore (it was a clickable div before). It returns the same 404 page. I have several caching plugins installed, but all are deactivated long ago.
Any help greatly appreciated, I've been at this for days now.
The problem seems to be on the selector you have used on line 18 of script.js. you were selecting div#branding which has an undefined .href property. Changing the selector to something like #branding a should resolve the error.
One of the JavaScripts is acting up. It appends the word 'undefined' at the back of your URL. Is there any JavaScript that you use that might alter the URL?
KahWee Teng is right, chechk your javascript ( probbly the one that is reponsible for thebrandlogo.svg spin ). It tries to overwrite your url, but, since it has no value, it just prints out "undefined".
The bottom works because it is a plain link.
If you visit this page in Chrome:
http://www.immigrationconsult.org/contact.php
And Inspect Element on the page, go to Console you will see this error:
GET htt...cms/contact/images/ajax-loader.gif 404 (Not Found) jquery.min.js:4
I followed the instructions here to create a:
http://css-tricks.com/weird-file-requests-and-easing-server-stress-with-htaccess/
I tested to make sure it works, and it does, but not on this specific request. jquery.min.js is the jQuery minified from the makers, I did not change it at all. I used Agent Ransack to deep search for any reference of this in any of my files, the search yielded no results.
I have no idea what to do or how to prevent this issue from happening, this seems like such a small issue, but I can not locate the cause of the problem! Please help.
So, it was really a misdirection by Chrome. The plugin at fault was jQuery Coda-Slider. Because it was JS compressed, Agent Ransack couldn't find the string... lesson learned...
You clearly don't have the ajax-loader.gif file in the correct directory, or at least your ajax script is looking the wrong place.
you can either modify the java script to point to the right location or you can just put the file in the correct location, i would choose the latter.
I have had these errors my self with JQuery, where some icons didn't get loaded, just had to put them in the correct folder and it worked.
But if you use googles jquery libs, all resources should get loaded automagic as well. Like this...
<script type="text/javascript"
src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("jquery", "1.7.2");
google.load(etc..);
</script>
You need to download the entire zip file from their website: http://jquerymobile.com/download/. After you unzip it, you will find the js file, the CSS and a folder called "images", all of which need to be present locally.
I've searched the entire web for a clear answer but haven't found one yet.
I have this site:
www.helixagent.com/todo/
and I want to load that entire site into a portlet in my main index page.
I tried an iFrame approach but it fails to load the site correctly. The styles and javascript files don't get loaded (i think)
Is there a way to make a portal that mimics a new browser page and load the content exactly as it would if it was directly accessed via the url bar?
It’s possible to perform cross-domain requests using jQuery.
Simply include this file after loading jQuery, and then you can do funky stuff like:
$('html').load('http://helixagent.com/todo/');
Note that this of course won’t load the embedded CSS and JS files. You’ll need to use an iframe for that:
$(function() {
$('body').append('<iframe src="http://www.helixagent.com/todo/" />');
});
Live example: http://jsbin.com/uruka
Here's an example using jQuery and iframe:
$(document).ready(function(){
$('#somediv').html("<iframe src='http://www.helixagent.com/todo/'></iframe>");
});
This should be placed inside the <head> tag of your page and it will load the entire site with all the js and css too into a div.
Have you looked at using Server Side Includes.