Comment intégrer Piwigo avec WordPress à l'aide d'un alias apache et d'une iframe.
La rédaction FI à aujourd'hui travaillé a trouvé comment intégrer Piwigo (logithèques d'imagerie website) avec WordPress
sous un autre dossier que le site principal. Compliqué mais simple après recherche.
POUR COMMENCER:
Il vous faudra créer une page enfant pour le lien avec votre galerie Piwigo.
Les fonctions de WordPress et piwigo ne peuvent pas s'intégrer directement
et l'intégration en partant d'un autre dossier à l'aide d’une iframe est nécessaire.
Commençons par décompresser votre dossier Piwigo dans un fichier du site.
Nous l'appellerons “book”
TRÈS IMPORTANT :En fonction de l’'emplacement ou vous souhaitez décompresser les fichiers de Piwigo, le nom de dossier ne doit pas être le même que le nom de la page WordPress que vous présenterez sur les liens de votre site.
EXPLICATION:
Si l’adresse de votre fichier décompresser sur votre site web est identique à l'adresse de wordpress renseigner pour accéder à la galerie, il y aura une erreur de lecture et WordPress passera en priorité, ce qui aura pour effet de ne pas pouvoir faire de lecture direct sur piwigo pour l'affichage responsive sur mobile.
Dans l'exemple nous avons donc :
-les fichiers piwigo décompresser dans “book”
-un modèle de page enfant appelé “page-piwigo”
-une page ou article crée appelé “galerie”
-une iframe de la page “galerie” qui sera dirigé vers “book”
Pour afficher entièrement la page de votre galerie tout en gardant les fonctions du site, vous devez créer (via votre éditeur préférer)
un modèle de page enfant (que nous appellerons “page-piwigo.php”) regroupant toutes les information php de votre thème et supprimer manuellement quelques lignes appelant des fonctions de WordPress qui permette de définir les marges et cadres de contenu du site.
Prenons exemple sur un thème au hazard, sydney a été choisi pour l'exemple.
Ci-dessous “page.php” regroupant toute les informations pour l'affichage complet d'une page appelé modèle par défaut dans l'administration WordPress.
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package Sydney
*/
get_header();
//Get classes for main content area
if ( apply_filters( 'sydney_disable_cart_checkout_sidebar', true ) && class_exists( 'WooCommerce' ) && ( is_checkout() || is_cart() ) ) {
$width = 'col-md-12';
} else {
$width = 'col-md-9';
}
?>
<div id="primary" class="content-area <?php echo esc_attr( apply_filters( 'sydney_content_area_class', $width ) ); ?>">
<main id="main" class="post-wrap" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php do_action( 'sydney_get_sidebar' ); ?>
<?php get_footer(); ?>
Remarquer 2 parties distinctes réparties de la façon suivante.
Première partie
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package Sydney
*/
get_header();
Et deuxième partie
<?php
//Get classes for main content area
if ( apply_filters( 'sydney_disable_cart_checkout_sidebar', true ) && class_exists( 'WooCommerce' ) && ( is_checkout() || is_cart() ) ) {
$width = 'col-md-12';
} else {
$width = 'col-md-9';
}
?>
<div id="primary" class="content-area <?php echo esc_attr( apply_filters( 'sydney_content_area_class', $width ) ); ?>">
<main id="main" class="post-wrap" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php do_action( 'sydney_get_sidebar' ); ?>
<?php get_footer(); ?>
Il est nécessaire de ne pas faire appel au header mais de le copier directement sur votre nouveau modèle de page enfant “page-piwigo.php”
Ouvrer maintenant header.php puis copier dans votre nouvelle page.
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php do_action('sydney_before_site'); //Hooked: sydney_preloader() ?>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'sydney' ); ?></a>
<?php do_action('sydney_before_header'); //Hooked: sydney_header_clone() ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-wrap">
<div class="<?php echo esc_attr( sydney_menu_container() ); ?>">
<div class="row">
<div class="col-md-4 col-sm-8 col-xs-12">
<?php if ( get_theme_mod('site_logo') ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
<?php if ( is_home() && !is_front_page() ) : ?>
<h1 class="site-title screen-reader-text"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
<?php else : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div>
<div class="col-md-8 col-sm-4 col-xs-12">
<div class="btn-menu"><i class="sydney-svg-icon"><?php sydney_get_svg_icon( 'icon-menu', true ); ?></i></div>
<nav id="mainnav" class="mainnav" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>
</header><!-- #masthead -->
<?php do_action('sydney_after_header'); ?>
<div class="sydney-hero-area">
<?php sydney_slider_template(); ?>
<div class="header-image">
<?php sydney_header_overlay(); ?>
<?php if ( ( get_theme_mod('front_header_type','nothing') == 'image' && is_front_page() ) || (get_theme_mod('site_header_type') == 'image' && !is_front_page() ) ) : ?>
<?php $shop_thumb = get_the_post_thumbnail_url( get_option( 'woocommerce_shop_page_id' )); ?>
<?php if ( class_exists( 'Woocommerce' ) && is_shop() && !$shop_thumb ) : ?>
<img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
<?php endif; ?>
<?php endif; ?>
</div>
<?php sydney_header_video(); ?>
<?php do_action('sydney_inside_hero'); ?>
</div>
<?php do_action('sydney_after_hero'); ?>
<div id="content" class="page-wrap">
<div class="container content-wrapper">
<div class="row">
Une fois cette manipulation faite il ne vous reste qu'à ajouter la deuxième parti de “page.php”
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php do_action('sydney_before_site'); //Hooked: sydney_preloader() ?>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'sydney' ); ?></a>
<?php do_action('sydney_before_header'); //Hooked: sydney_header_clone() ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-wrap">
<div class="<?php echo esc_attr( sydney_menu_container() ); ?>">
<div class="row">
<div class="col-md-4 col-sm-8 col-xs-12">
<?php if ( get_theme_mod('site_logo') ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
<?php if ( is_home() && !is_front_page() ) : ?>
<h1 class="site-title screen-reader-text"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
<?php else : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div>
<div class="col-md-8 col-sm-4 col-xs-12">
<div class="btn-menu"><i class="sydney-svg-icon"><?php sydney_get_svg_icon( 'icon-menu', true ); ?></i></div>
<nav id="mainnav" class="mainnav" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>
</header><!-- #masthead -->
<?php do_action('sydney_after_header'); ?>
<div class="sydney-hero-area">
<?php sydney_slider_template(); ?>
<div class="header-image">
<?php sydney_header_overlay(); ?>
<?php if ( ( get_theme_mod('front_header_type','nothing') == 'image' && is_front_page() ) || (get_theme_mod('site_header_type') == 'image' && !is_front_page() ) ) : ?>
<?php $shop_thumb = get_the_post_thumbnail_url( get_option( 'woocommerce_shop_page_id' )); ?>
<?php if ( class_exists( 'Woocommerce' ) && is_shop() && !$shop_thumb ) : ?>
<img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
<?php endif; ?>
<?php endif; ?>
</div>
<?php sydney_header_video(); ?>
<?php do_action('sydney_inside_hero'); ?>
</div>
<?php do_action('sydney_after_hero'); ?>
<div id="content" class="page-wrap">
<div class="container content-wrapper">
<div class="row">
<?php
//Get classes for main content area
if ( apply_filters( 'sydney_disable_cart_checkout_sidebar', true ) && class_exists( 'WooCommerce' ) && ( is_checkout() || is_cart() ) ) {
$width = 'col-md-12';
} else {
$width = 'col-md-9';
}
?>
<div id="primary" class="content-area <?php echo esc_attr( apply_filters( 'sydney_content_area_class', $width ) ); ?>">
<main id="main" class="post-wrap" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php do_action( 'sydney_get_sidebar' ); ?>
<?php get_footer(); ?>
Comme expliqué plus haut, il est nécessaire d'enlever quelques fonctions
pour pouvoir disposer de l'espace tout en gardant la fonctionnalité de texte de WordPress pour insérer le script Iframe, inclure le footer et si souhaitez d'ajouter plus sous la galerie.
Supprimer les lignes 54 à 59 incluse et de 61 à 77 incluse.
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php do_action('sydney_before_site'); //Hooked: sydney_preloader() ?>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'sydney' ); ?></a>
<?php do_action('sydney_before_header'); //Hooked: sydney_header_clone() ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-wrap">
<div class="<?php echo esc_attr( sydney_menu_container() ); ?>">
<div class="row">
<div class="col-md-4 col-sm-8 col-xs-12">
<?php if ( get_theme_mod('site_logo') ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
<?php if ( is_home() && !is_front_page() ) : ?>
<h1 class="site-title screen-reader-text"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
<?php else : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div>
<div class="col-md-8 col-sm-4 col-xs-12">
<div class="btn-menu"><i class="sydney-svg-icon"><?php sydney_get_svg_icon( 'icon-menu', true ); ?></i></div>
<nav id="mainnav" class="mainnav" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>
</header><!-- #masthead -->
<?php do_action('sydney_after_header'); ?>
<div class="sydney-hero-area">
<?php sydney_slider_template(); ?>
<div class="header-image">
<?php sydney_header_overlay(); ?>
</div>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php do_action( 'sydney_get_sidebar' ); ?>
<?php get_footer(); ?>
IFRAME:
Pour créer une Iframe, copié les quelques ligne dans la zone de texte de rédaction de page WordPress (en mode texte HTML et non visuel ou block) de votre nouvelle page “galerie” et dans le modèle de page sélectionner “piwigo” (qui est le modèle de page enfant créer plus haut).
Nous avons inclus du javascript pour ne pas avoir de double scrolling vertical et avoir un redimensionnement automatique.
Inclus également marging top a modifiez (à vous de revoir à quel hauteur vous souhaitez commencer la frame de la galerie).
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="https://french-interface.com/book/" frameborder="0" width="100%" scrolling="no" onload="resizeIframe(this)"></iframe>
Le résultat de cette Iframe vous donnera l'affichage de votre galerie en pleine page.
Exemple ci dessous contenu dans le DIV de notre article et fonctionnel sur la galerie de notre site.
Un problème remarqué sur la navigation d'autre langue si utilisation du plugin Transposh et d'un alias comme lien de navigation, celui-ci ajoute le lien modifier et affecte donc la redirection.
Résolu en ajoutant <span class=”no_translate”> et </span> de cette façon.
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<span class="no_translate"><iframe src="https://french-interface.com/wp-content/themes/FI/book/index.php?/category/114" frameborder="0" width="100%" scrolling="no" onload="resizeIframe(this)"></iframe></span>
DEVICE DETECTION
Pour l'affichage sur mobile de notre galerie, un script doit être ajouter sur la page enfant “page-piwigo” à placer entre les balise <head> et <head>.
<script type="text/javascript">
function DetectTheThing()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1
|| uagent.search("android") > -1 || uagent.search("blackberry") > -1
|| uagent.search("webos") > -1)
window.location.href ="https://french-interface.com/galerie/";
}
</script>
Ajouter un onload sur le boby.
<body onload="DetectTheThing()" <?php body_class(); ?>>Au final cela nous donne.
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<head>
<script type="text/javascript">
function DetectTheThing()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1
|| uagent.search("android") > -1 || uagent.search("blackberry") > -1
|| uagent.search("webos") > -1)
window.location.href ="otherindex.html";
}
</script>
<?php wp_head(); ?>
</head>
<body onload="DetectTheThing()" <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php do_action('sydney_before_site'); //Hooked: sydney_preloader() ?>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'sydney' ); ?></a>
<?php do_action('sydney_before_header'); //Hooked: sydney_header_clone() ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-wrap">
<div class="<?php echo esc_attr( sydney_menu_container() ); ?>">
<div class="row">
<div class="col-md-4 col-sm-8 col-xs-12">
<?php if ( get_theme_mod('site_logo') ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
<?php if ( is_home() && !is_front_page() ) : ?>
<h1 class="site-title screen-reader-text"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
<?php else : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div>
<div class="col-md-8 col-sm-4 col-xs-12">
<div class="btn-menu"><i class="sydney-svg-icon"><?php sydney_get_svg_icon( 'icon-menu', true ); ?></i></div>
<nav id="mainnav" class="mainnav" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>
</header><!-- #masthead -->
<?php do_action('sydney_after_header'); ?>
<div class="sydney-hero-area">
<?php sydney_slider_template(); ?>
<div class="header-image">
<?php sydney_header_overlay(); ?>
</div>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php do_action( 'sydney_get_sidebar' ); ?>
<?php get_footer(); ?>
N'hésiter pas a nous faire pars de vos commentaire pour améliorer la rédaction.
[site_reviews_summary assigned_to=”post_id”]
[site_reviews_form assign_to=”post_id”] |
[site_reviews display=10 assigned_to=”post_id”]
Flux RSS
Il est difficile de trouver des personnes compétentes sur ce sujet, mais
vous semblez savoir de quoi vous parlez! Merci
J'apprécie vraiment que vous fournissiez ces détails aux personnes cherchant à savoir
en savoir plus sur les domaines similaires à celui-ci. Votre blog
était bien écrit et très bien documenté, qui est certainement très apprécié.
En fait, je recherche constamment de nouveaux sites Web pour
suivre et lire régulièrement.
Quoi de neuf tout le monde, ici tout le monde partage ces savoir-faire, c'est donc agréable de lire ce blog, et j'ai utilisé pour aller voir ce blog tout le temps.
Certainement imaginer ce que vous avez déclaré. votre favori
la justification semblait être au filet le facteur le plus facile d'être
conscient de. Je vous le dis, Je me ennuyé même certainement que les gens tiennent compte des préoccupations qu'ils ne se rendent pas clairement
sur. Vous avez réussi à frapper le clou sur le sommet et a également souligné la totalité de son sans effets secondaires besoin ,
d'autres personnes pourraient prendre un signal. Sera probablement de retour pour obtenir plus.
Merci
Salutations de la Floride! Je me ennuie à mort au travail alors j'ai décidé
parcourir votre site sur mon iphone pendant la pause déjeuner. J'adore les informations que vous fournissez ici et ne peut pas attendre de jeter un oeil quand je rentre à la maison.
Je suis surpris de voir à quelle vitesse votre blog chargé sur mon téléphone portable ..
Je ne suis pas même avec WIFI, juste 3G .. De toute façon, merveilleux blog!