I've searched so much that my brain is starting to hurt. Basically, I would like for the button on my site to open a YouTube video on mobile. On desktop, it will open up a lightbox and a simple embed that autoplays. I've read that mobile devices won't allow autoplay because it eats up data. If the user is choosing a button ('Watch Now', 'Watch Video', etc.) is that not a choice to use data? Is there really no way to do an .onClick parameter?
Thanks for any help!
Use the wordpress function wp_is_mobile().
if ( wp_is_mobile() ) {
/* Display and echo for mobile specific stuff here */
}else{
/* Display and echo for Desktop */
}
Read more about this function https://developer.wordpress.org/reference/functions/wp_is_mobile/
Related
I'm using the Genesis Framework on my website. I disabled the dashicons from loading on the front-end using the code below in my functions.php file:
function wpdocs_dequeue_dashicon() {
if (current_user_can( 'update_core' )) {
return;
}
wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );
but i noticed my mobile/tablet views are now missing icons. More particularly, the hamburger menu and the down arrow for a dropdown.
Here's how it looks like --> https://www.dropbox.com/s/7azuj6vraehzll5/dashicons.png?dl=0
I'm not using the dashicons on my desktop version that's why i disabled it (because it's causing my site to load slowly using website speed tests).
Is there a way to load dashicons only on mobile? Or at least those two icons? or via css? I can't seem to find any. All my googling shows me how to add them (which i don't).
The only reason I want them to load on mobile is to the hamburger menu icon and a down arrow is the best representation that that's a menu and an option avaialable.
I am trying to remove the search link from the Woocommerce handheld footer menu which appears when using a mobile device.
I have tried following the official Woocommerce guide here on Customizing links in the handheld footer menu, but the code doesn't change the behaviour. I have already tried clearing cache, cookies & inprivate browsing to test. Any suggestions why this isn't changing?
Code:
add_filter( 'storefront_handheld_footer_bar_links', 'jk_remove_handheld_footer_links' );
function jk_remove_handheld_footer_links( $links ) {
unset( $links['search'] );
return $links;
}
The above code will work. However, if you are modifying the HTML of storefront_handheld_footer_bar_links anywhere else in your Woocommerce site, this will override and take precedence of the PHP function.
Bear this in mind when trying to modify the above function.
Thanks #Orlando P. for help in debugging.
I have a doubt about WordPress. I know that is possible to hide a page in WordPress, but I would like to know if there is some code to show this page only to mobile devices and hide it from PC.
I would like to hide the page "subir captura" because I have a button for this function, but that button doesn't work in mobile devices, so I want to use the page, but hide it from PC.
https://i.gyazo.com/b5cd9c500ddbcaaf592cd057e183e69f.png
You can use the WP Mobile Detect plugin to accomplish a variety of different user agent tests. Use the wpmd_is_notdevice() conditional to test for desktops.
You have to use wordpress is mobile function like this:
<?php
if( !wp_is_mobile() ){
/* Display and echo mobile specific stuff here */
}
?>
First of all: sorry for my bad English, I'm from Germany.
I've got a big problem in my wordpress homepage with the header on mobile devices.
The site is: www.hd-sign.de
If you open the page on a computer, everything looks fine, but if I open the page on a mobile device, the text box on the left is over the "HD - Sign" text and it looks very bad.
You can see what i mean on "am i responsive".
I installed the Mobile Device Detect Plugin to Wordpress and added this to my custom.css file:
include Mobile_Detect.php;
$detect = new Mobile_Detect;
if( ! $detect->isMobile() {
include "mobile_header.php";
}
else {
include "header.php";
}
But it wont work. For sure I installed the header.php & mobile_header.php (without the boxed text) to my main theme folder.
I tried many different methods in the past 5 hours but I still was not able to fix this problem.
Thank you very much in advance for every answer!
EDIT:
Thanks for every answer, actually i got the following code:
include Mobile_Detect.php;
$detect = new Mobile_Detect;
if( ! $detect->isMobile() ) : {
function get_header( 'mobile' );
}
else : {
function get_header();
endif;
}
Im not sure if this code is correct and absolutely not sure if i have to put the code in the "general-template.php" or in my custom css. Sorry for this stupid question, but i just started working with html and css.
It would be great if someone can tell me where i have to put the (correct?) code!
Thanks!
Name your files like this:
header.php
header-mobile.php
and use WordPress conventions to call your headers like this:
// default
get_header();
// mobile
get_header( 'mobile' );
Other than that, I'd highly recommend looking into responsive web design and media queries. Your header will load once when the page loads for the first time. It won't change when you resize the browser window by using this technique.
Resources:
WordPress function reference for get_header() - http://codex.wordpress.org/Function_Reference/get_header
Try this.
if(!preg_match('/(iPhone|iPod|iPad|Android|BlackBerry)/i', $_SERVER['HTTP_USER_AGENT']))
{
include "mobile_header.php";
}
else
{
include "header.php";
}
I'm using the Genesis Framework, static page, with Soliloquy slider on the home page only. We would like to prevent the slider to load on mobile device to reduce load time.
Any way to do that ? Basically I need to know how to disable some PHP when a mobile device is detected.
<?php if ( !wp_is_mobile() ) {
/* Show Slider here */
} ?
Refer HEre Wp Is mobile