Artikkel oppdatert 22 november 2020 til 9 h 42 meg


Hvordan integrere Piwigo med WordPress bruker en alias apache og en iframe.

skriving FI til jobb i dag har funnet hvordan å integrere Piwigo (logithèques d'imagerie website) avec WordPress
sous un autre dossier que le site principal. Compliqué mais simple après recherche.

KOMME I GANG:

Du må opprette en underordnet side for å koble til galleriet Piwigo.
Funksjonene WordPress og piwigo kan ikke integreres direkte
og integrering fra en annen fil ved hjelp av en iframe er nødvendig.
La oss starte med å pakke ut filen Piwigo i en sidefil.
Vi vil kalle det “bok”
vELDIG VIKTIG :Avhengig av hvor du vil pakke ut filene Piwigo, mappenavnet må ikke være det samme som sidenavnet WordPress som du vil presentere på lenkene til nettstedet ditt.
FORKLARING:
Hvis adressen til utpakningsfilen din på nettstedet ditt er identisk med wordpress-adressen, fyll ut for å få tilgang til galleriet, det vil være en lesefeil og WordPress vil prioritere, som vil ha den effekten at du ikke kan lese direkte på piwigo for responsiv visning på mobil.
I eksemplet vi derfor har :
-piwigo-filene pakkes ut “bok”
-en barnesidemal som heter “side-piwigo”
-en side eller artikkel opprettet kalt “galleri”
-en iframe på siden “galleri” hvem vil bli dirigert til “bok”
For å vise hele siden i galleriet ditt mens du holder nettstedets funksjoner, du må lage (via din foretrukne editor)
en barnesidemal (som vi vil ringe “side-piwigo.php”) samle all php-informasjonen til temaet ditt og manuelt slette noen få linjer som ringer funksjonene til WordPress som gjør det mulig å definere områdets marginer og innholdsrammer.
La oss ta et eksempel på et tilfeldig tema, sydney ble valgt som et eksempel.
Under “page.php” samle all informasjon for fullstendig visning av en side som kalles standardmalen i administrasjonen 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 “side-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 depage.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 til 59 incluse et de 61 til 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, kopiert noen linje i WordPress-side redaksjonelt tekstboks (en mode texte HTML et non visuel ou block) de votre nouvelle page “galleri” et dans le modèle de page sélectionnerpiwigo” (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 style="margin-top: -155px" src="https://french-interface.com/book/" frameborder="0" width="100%" scrolling="no" onload="resizeIframe(this)"></iframe>


 

Resultatet av denne Iframe du vil vise galleriet i full skjerm.
Eksempelet nedenfor finnes i DIV vår artikkel om funksjonell galleri vår hjemmeside.


 
 
Et problem observert i andre språk navigasjon enten du bruker plugin Transposh og en alias som et navigasjons lenke, det legger redigerings linken og dermed påvirker omdirigering.
Løses ved å legge <span class=no_translate”> og </span> på den måten.

<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 style="margin-top: -155px" 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 “side-piwigo” à placer entre les balise <head> og <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(); ?>


 
Ikke nøl med å gjøre oss forlate din kommentar å forbedre skrive.


2.5
2.5 vurdering
2.5 / 5 stjerner (2 utsikt)
Utmerket0%
Veldig bra50%
Gjennomsnitt0%
Fattige0%
Fryktelig50%

avbryte

 

Ranger denne artikkelen

Très bien et fonctionnel ..! BRAVO

4.0 vurdering
20 januar 2020

2 tanker om “Piwigo integreres med WordPress

  1. Definitely imagine that which you stated. Your favourite
    justification appeared to be at the net the easiest factor to be
    aware of. I say to you, I definitely get annoyed even as people consider concerns that they plainly do not realize
    about. You managed to hit the nail upon the top and also outlined out the entire thing with no need side-effects ,
    other folks could take a signal. Will likely be back to get more.
    Thanks

  2. Greetings from Florida! I’m bored to death at work so I decided to
    browse your site on my iphone during lunch break. I love the info you provide here and can’t wait to take a look when I get home.
    I’m surprised at how fast your blog loaded on my cell phone ..
    I’m not even using WIFI, just 3G .. Anyhow, wonderful blog!

Legg igjen et svar

e-postadressen din vil ikke offentliggjøres. Obligatoriske felt er merket *