determine whether content is of type Page or a Post and display accordingly
문제
I'm looking for a way to open every/any link to a blog post in a lightbox/modal globally and without having to any extra classes or rel attribute to the link element. I know I can access this info from within the page or post itself, but is there a way, through some sort of AJAX call I presume, to get this data before the request for the content is actually made so that when I do retrieve the response content, I can either just display it normally in the same browser tab (in the case of a Page) or trigger a lightbox and populate it with the content instead.
At first I was thinking about using regular expression matching on the link element's href and if it matched something looking like a blog post URL, open the lightbox. that seems pretty hacky tho and is definitely not bulletproof.
This is what I've got so far...
JavaScript:
$('a:not([href^="#"])[href]').click(function(e) {
e.preventDefault();
var $this = $(this);
var lnk = $this.attr('href');
var jqxhr = $.post("/wp-content/themes/mist-child/php/get-post-type.php", {url: lnk});
jqxhr.done(function(data) {
if(data === 'post') {
$.prettyPhoto.open(lnk + '?iframe=true&width=80%&height=80%');
}
});
});
get-post-type.php (/wp-content/themes/CHILD_THEME/php/...)
<?php
require_once(rtrim($_SERVER['DOCUMENT_ROOT'], '/') . '/wp-load.php');
$url = $_POST['url'];
$postid = url_to_postid($url);
echo(get_post_type($postid));
?>
The part where Posts get opened in the lightbox is working. It's a little slow - I'm guessing that loading wp-load.php adds quite a bit of overhead. is there any way to add my PHP somewhere in functions.php and call that function (with arguments) via AJAX?
I know it needs some work, but as far as a prototype goes, am I moving in the right direction? Please feel free to shoot this full of as many holes as you can find.
해결책 2
Going with @milo's suggestion in the comments of the OP, I added a function to functions.php that rewrites URLs output by the API with a specific query string key/value when the post_type
is post
. This allows me to see this on the front end quite easily and take the appropriate action on the link depending on the absence/presence of said query string data. In this case, the frontend script finds all the elements "marked" as linking to post
s (and not page
s) and simply opens their href
in a lightbox. SO much simpler than making several AJAX calls when the page is rendered to check the post_type
for various links on the page.
functions.php
function append_query_string( $url, $post, $leavename=false ) {
if ( $post->post_type == 'post' ) {
$url = add_query_arg( 'blogLnk', '1', $url );
}
return $url;
}
add_filter( 'post_link', 'append_query_string', 10, 3 );
JavaScript
var blogLnks = [
'a[hrf*="blogLnk=1"]',
'a[rel="blogLnk"]'
];
var $blogLnks = $(blogLnks.join(','));
$blogLnks.click(function(e) {
e.preventDefault();
console.log('click - open me in lightbox');
var $this = $(this);
var qs = '?iframe=true&width=80%&height=90%';
var lnk = $this.attr('href');
$.prettyPhoto.open(lnk + qs);
});
다른 팁
The wordpress way solution is
// put this in header.php
var ajax_url ="<?php echo admin_url('admin-ajax.php');?>"
// in js file
$('a:not([href^="#"])[href]').click(function(e) {
e.preventDefault();
var $this = $(this);
var lnk = $this.attr('href');
var jqxhr = $.post(ajax_url, {'action':'list_content', url: lnk});
jqxhr.done(function(data) {
if(data === 'post') {
$.prettyPhoto.open(lnk + '?iframe=true&width=80%&height=80%');
}
});
});
// functions.php
add_action('wp_ajax_nopriv_list_content', 'list_content');
add_action('wp_ajax_list_content', 'list_content');
function list_content() {
$url = $_POST['url'];
$postid = url_to_postid($url);
echo(get_post_type($postid));
die();
}