Vous n'êtes pas identifié.
Annonce
Annonce 1 : Le Codex en français a besoin de vous pour avancer !
Annonce 2 : Avant de poster, n'oubliez pas de faire une petite Recherche et de lire les règles de ce forum.
#1 05-10-2006 00:04:08
[tuto] Integre ZenPhoto dans WordPress
INTEGRER ZENPHOTO (v1.1.5) DANS WORDPRESS(v2.5.1fr)
Mis à jour le 29/04/2008
Tuto réalisé avec :
Wordpress : v2.5.1fr, thème WordPress Default
Zenphoto v1.1.5, thème Default
Logiciel de transfert (gratuit): Filezilla
Logiciel d'édition (gratuit) : notepad++
***********************************************************************************************************************************
Fichier index.php du thème default de Zenphoto.
***********************************************************************************************************************************
Supprimer toutes les lignes, sauf les lignes allant de 15 à 46
Insérez le code suivant au dessus des lignes que vous avez conservé ( lignes avant <div id="main"> )
Mettez à la place de blog ( /blog/wp-blog-header.php ) le dossier d'installation de wordpress
Exemple:
Si votre site est www.votresite.fr/wordpress alors mettez
/wordpress/wp-blog-header.php
Si c'est à la racine mettez ( on enlève /blog )
/wp-blog-header.php
Code à mettre avant
Code:
- if (!defined('WEBPATH')) die();
- $themeResult = getTheme($zenCSS, $themeColor, 'light');
- $firstPageImages = normalizeColumns('2', '6');
- require($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php');
- function addcss() {
- global $_zp_themeroot;
- global $zenCSS;
- echo '<link rel="stylesheet" href="'.$zenCSS.'" type="text/css" />';
- printRSSHeaderLink('Gallery','Gallery RSS');
- zenJavascript();
- }
- add_action('wp_head', 'addcss');
- get_header();
- db_connect(); // reconnect to zenphoto db
- require_once("themes/default/themeoptions.php");?>
- <div id="content" class="narrowcolumn">
Code à mettre aprés
Code:
- </div>
- <?php $wpdb->select(DB_NAME); // reconnect wordpress db ?>
- <?php get_sidebar(); ?>
- <?php get_footer(); ?>
***********************************************************************************************************************************
Fichier album.php du thème default de Zenphoto.
***********************************************************************************************************************************
Supprimer toutes les lignes, sauf les lignes allant de 15 à 62
Insérez le code suivant au dessus des lignes que vous avez conservé ( lignes avant <div id="main"> )
Code à mettre avant
Code:
- <?php
- if (!defined('WEBPATH')) die();
- $themeResult = getTheme($zenCSS, $themeColor, 'light');
- $firstPageImages = normalizeColumns('2', '6');
- require($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php');
- function addcss() {
- global $_zp_themeroot;
- global $zenCSS;
- echo '<link rel="stylesheet" href="'.$zenCSS.'" type="text/css" />';
- echo '<script type="text/javascript" src="'.FULLWEBPATH .'/'. ZENFOLDER.'/plugins/rating/rating.js"></script>';
- echo '<link rel="stylesheet" href="'.FULLWEBPATH .'/'. ZENFOLDER.'/plugins/rating/rating.css" type="text/css" />';
- printRSSHeaderLink('Album',getAlbumTitle());
- zenJavascript();
- }
- add_action('wp_head', 'addcss');
- get_header();
- db_connect(); // reconnect to zenphoto db
- require_once("themes/default/themeoptions.php");?>
- <div id="content" class="narrowcolumn">
Code à mettre aprés
Code:
- </div>
- <?php $wpdb->select(DB_NAME); // reconnect wordpress db ?>
- <?php get_sidebar(); ?>
- <?php get_footer(); ?>
***********************************************************************************************************************************
Fichier images.php du thème default de Zenphoto..
***********************************************************************************************************************************
Supprimer toutes les lignes, sauf les lignes allant de 28 à 130
Insérez le code suivant au dessus des lignes que vous avez conservé ( lignes avant <div id="main"> )
Code à mettre avant
Code:
- <?php
- if (!defined('WEBPATH')) die();
- $themeResult = getTheme($zenCSS, $themeColor, 'light');
- $firstPageImages = normalizeColumns('2', '6');
- require($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php');
- function addcss() {
- global $_zp_themeroot;
- global $zenCSS;
- echo '<link rel="stylesheet" href="'.$zenCSS.'" type="text/css" />';
- echo '<link rel="stylesheet" href="'.FULLWEBPATH .'/'. ZENFOLDER.'/plugins/rating/rating.css" type="text/css" />';
- echo '<link rel="stylesheet" href="'.FULLWEBPATH .'/'. ZENFOLDER.'/js/thickbox.css" type="text/css" />';
- echo '<script type="text/javascript" src="'.FULLWEBPATH .'/'. ZENFOLDER.'/plugins/rating/rating.js"></script>';
- echo '<script type="text/javascript" src="'.FULLWEBPATH .'/'. ZENFOLDER.'/js/jquery.js"></script>';
- echo '<script type="text/javascript" src="'.FULLWEBPATH .'/'. ZENFOLDER.'/js/thickbox.js"></script>';
- echo '
- <script type="text/javascript">
- function toggleComments() {
- var commentDiv = document.getElementById("comments");
- if (commentDiv.style.display == "block") {
- commentDiv.style.display = "none";
- } else {
- commentDiv.style.display = "block";
- }
- }
- </script>';
- printRSSHeaderLink('Gallery','Gallery RSS');
- zenJavascript();
- }
- add_action('wp_head', 'addcss');
- get_header();
- db_connect(); // reconnect to zenphoto db
- require_once("themes/default/themeoptions.php");?>
- <div id="content" class="narrowcolumn">
Code à mettre aprés
Code:
- </div>
- <?php $wpdb->select(DB_NAME); // reconnect wordpress db ?>
- <?php get_sidebar(); ?>
- <?php get_footer(); ?>
***********************************************************************************************************************************
Fichier styles/light.css du thème default de Zenphoto.
***********************************************************************************************************************************
Trouver ligne 16:
body {
background: #F5F5F3;
margin: 0px;
padding: 0px 0px 50px;
text-align: center;
}
Remplacer par:
/* body {
background: #F5F5F3;
margin: 0px;
padding: 0px 0px 50px;
text-align: center;
} */
***********************************************************************************************************************************
Trouver ligne 25:
width: 685px;
Remplacer par:
/*width: 685px;*/
***********************************************************************************************************************************
Trouver ligne 35:
width: 640px;
Remplacer par:
/*width: 640px;*/
***********************************************************************************************************************************
Trouver ligne 72:
body {
font: normal 82%/200% "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
color: #5A5A4B;
}
Remplacer par:
/* body {
font: normal 82%/200% "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
color: #5A5A4B;
} */
***********************************************************************************************************************************
Trouver ligne 175:
.pagenav {
clear: both;
}
Remplacer par:
/* .pagenav {
clear: both;
} */
***********************************************************************************************************************************
Trouver ligne 364:
width: 100%;
Remplacer par:
width: 80%;
***********************************************************************************************************************************
Fichier wp-content/themes/default/style.css du thème default de Wordpress.
***********************************************************************************************************************************
Trouver ligne 383:
width: 100%;
Remplacer par:
width: 80%;
RESULTAT
Index.php
Album.php
Image.php
Pour ceux qui ne veulent pas faire les manips, voici le zip des fichiers modifiés:
Veillez à bien mettre les fichiers css dans le bon répertoire...
http://kongasiou.free.fr/integrationZp1 … p2.5.1.zip
Dean KONG A SIOU
http://www.Progs.fr
http://www.zenphoto.fr
ANCIENNES VERSIONS
INTEGRER ZENPHOTO (v1.0.3b) DANS WORDPRESS(v2.0.4fr) 
Tuto réalisé avec :
Wordpress : 2.0.4fr, thème WordPress Default 1.5 ( donc le thème par defaut! )
Zenphoto 1.0.3b-fr, thème Pure Default ( aussi le thème par défaut )
Logiciel de transfert (gratuit): Filezilla
Logiciel d'édition (gratuit) : notepad++
***********************************************************************************************************************************
okok alors commençons tout doucement ( donc sûrement
)
Vous allez créer un nouveau thème pure_default, n'ayez pas peur, nous allons faire du clonage!
Faites une copie du thème et renommez le par exemple integration ( ou ce que vous voulez... )
Ouvrez le fichier theme.txt, remplacez ligne 2:
Zenphoto Pure Default par Integration ( pour différencier le nouveau thème )
Ouvrez le fichier index.php du nouveau thème.
Supprimez toutes les lignes, sauf les lignes allant de 15 à 46
Insérez le code suivant au dessus des lignes que vous avez conservé ( lignes avant <div id="main"> )
Mettez à la place de blog ( /blog/wp-blog-header.php ) le dossier d'installation de wordpress
Exemple:
Si votre site est www.votresite.fr/wordpress alors mettez
/wordpress/wp-blog-header.php
Si c'est à la racine mettez ( on enlève /blog )
/wp-blog-header.php
Code à mettre avant
Code:
- <?php if (!defined('WEBPATH')) die(); ?>
- <?php require($_SERVER['DOCUMENT_ROOT'].'/blog/wp-blog-header.php'); ?>
- <?php
- // add the zen css to the wordpress header
- function addcss() {
- global $_zp_themeroot;
- echo '<link rel="stylesheet" href="'.$_zp_themeroot.'/zen.css" type="text/css" />';
- }
- add_action('wp_head', 'addcss');
- ?>
- <?php get_header(); ?>
- <?php db_connect(); // reconnect to zenphoto db ?>
- <?php require_once("themes/pure_default/pure-template-functions.php");?>
- <div id="content" class="narrowcolumn">
Puis le code suivant en dessous
Code à mettre aprés
Code:
- </div>
- <?php $wpdb->select(DB_NAME); // reconnect wordpress db ?>
- <?php get_sidebar(); ?>
- <?php get_footer(); ?>
Alors ça devrait donner quelque chose comme ça si on enlève les lignes vides, en couleur 
![]()
Vous pouvez avoir un aperçu de l'intégration index.php ( activez votre nouveau thème, integration ), nous aurons des modifications à faire sur le css ( c'est normal que ce soit décalé ), mais on verra ça plus tard, chaque chose en son temps 
bon j'ai droit à une petite pause? , j'ai faim!!!!! 
Et c'est reparti !!
Alors passons au fichier album.php ( du même thème vous l'avez deviné !, enfin on ne sait jamais...)
Conservez les lignes de codes allant de 13 à 35
Insérez le code suivant au dessus des lignes que vous avez conservé ( lignes avant <div id="main"> )
Mettez à la place de blog ( /blog/wp-blog-header.php ) le dossier d'installation de wordpress
Exemple:
Si votre site est www.votresite.fr/wordpress alors mettez
/wordpress/wp-blog-header.php
Si c'est à la racine mettez ( on enlève /blog )
/wp-blog-header.php
Code à mettre avant
Code:
- <?php if (!defined('WEBPATH')) die(); ?>
- <?php require($_SERVER['DOCUMENT_ROOT'].'/blog/wp-blog-header.php'); ?>
- <?php
- // add the zen css to the wordpress header
- function addcss() {
- global $_zp_themeroot;
- echo '<link rel="stylesheet" href="'.$_zp_themeroot.'/zen.css" type="text/css" />';
- }
- add_action('wp_head', 'addcss');
- ?>
- <?php get_header(); ?>
- <?php db_connect(); // reconnect to zenphoto db ?>
- <?php require_once("themes/pure_default/pure-template-functions.php");?>
- <div id="content" class="narrowcolumn">
Puis le code suivant en dessous
Code à mettre aprés
Code:
- </div>
- <?php $wpdb->select(DB_NAME); // reconnect wordpress db ?>
- <?php get_sidebar(); ?>
- <?php get_footer(); ?>
Alors passons à image.php
Conservez les ligne allant de 48 à 149
Code:
- <div id="main">
- <div class="imgnav">
- <?php if (hasPrevImage()) { ?>
- *
- *
- *
- <?php endwhile; ?>
- </div>
- </div>
- </div>
- </div>
on recommence les ajouts
Insérez le code suivant au dessus des lignes que vous avez conservé ( lignes avant <div id="main"> )
Mettez à la place de blog ( /blog/wp-blog-header.php ) le dossier d'installation de wordpress
Exemple:
Si votre site est www.votresite.fr/wordpress alors mettez
/wordpress/wp-blog-header.php
Si c'est à la racine mettez ( on enlève /blog )
/wp-blog-header.php
Code à mettre avant
Code:
- <?php if (!defined('WEBPATH')) die(); ?>
- <?php require($_SERVER['DOCUMENT_ROOT'].'/blog/wp-blog-header.php'); ?>
- <?php
- // add the zen css to the wordpress header
- function addcss() {
- global $_zp_themeroot;
- echo '<link rel="stylesheet" href="'.$_zp_themeroot.'/zen.css" type="text/css" />';
- }
- add_action('wp_head', 'addcss');
- ?>
- <?php get_header(); ?>
- <?php db_connect(); // reconnect to zenphoto db ?>
- <?php require_once("themes/pure_default/pure-template-functions.php");?>
- <div id="content" class="narrowcolumn">
Puis le code suivant en dessous
Code à mettre aprés
Code:
- </div>
- <?php $wpdb->select(DB_NAME); // reconnect wordpress db ?>
- <?php get_sidebar(); ?>
- <?php get_footer(); ?>
Rem: nous avons fait trois fois les mêmes insertions, veillez à bien mettre à jour le lien de votre installation de wordpress
Maintenant nous allons passer à la mise en page ( css )
petite pause 
euh non grande pause ( dodo )
05/10/06 14h25
Ok Ok je reprends ... jusqu' à ce que mon fils se réveille ! 
Alors
Ouvrir le fichier zen.css de votre thème ( integration )
trouver ligne 141
Code:
- .pagenav {
- clear: both;
- }
Remplacer par
Code:
- /*.pagenav {
- clear: both;
- }*/
trouver ligne 28
Code:
- width: 600px;
Remplacer par
Code:
- /*width: 600px;*/
trouver ligne 203
Code:
- .albumdesc {
- float: right;
- width: 480px;
- }
Remplacer par
Code:
- /*.albumdesc {
- float: right;
- width: 480px;
- }*/
trouver ligne 64
Code:
- body {
- font: normal 82%/200% "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #5A5A4B;
- }
Remplacer par
Code:
- /*body {
- font: normal 82%/200% "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #5A5A4B;
- }*/
Alors c'est presque bon, maintenat il faut modifier une valeur dans zp-config.php
la taille de l'image
Vers ligne 75 trouver et remplacez 595 par une plus petite valeur ( entre 300 et 450 ...)
Code:
- $conf['image_size'] = 595;
Et bien c'est pas trop mal tout ça 
Bon, il y a encore du travail sur la mise en page, et sans doute quelques modifs à faire, mais avec ça vous pouvez avoir une galerie correct.
Le javascript n'est pas encore mis en place dans ce tuto, vous ne pourrez donc pas vous servir de quelques fonctionnalités, je mettrais la démarche à suivre quand je l'aurais testé sur mon site.
Si quelques " pro " en css peuvent me donner un coup de pouce pour arranger l'intégration...je suis preneur ( je fais un peu à taton... )
Bon alors place aux questions, pour ceux qui ce sont lancés dans l'intégration
Nb je ferais un thème dédié une fois que j'aurais corrigé ( grâce à votre aide ) toutes les erreurs, l'installation dans ce cas ne prendra que quelques minutes...
Sinon vous vous pouvez voir ce que ça donne à l'adresse suivante:
Dernière modification par dean (30-04-2008 09:24:30)
Hors ligne
#2 05-10-2006 15:07:49
Re: [tuto] Integre ZenPhoto dans WordPress
Et voilà !!!!! terminé 
Hors ligne
#3 06-10-2006 09:37:21
Re: [tuto] Integre ZenPhoto dans WordPress
Beau travail 
J'éplingle 
Mais vous savez, je crois pas qu'il y ai de bon ou mauvais blog... Enfin si je devais résumer ma vie aujourd'hui avec vous, je dirais que c'est d'abord des rencontres, des blogs qui m'ont tendu la main peut être à un moment où je ne pouvais pas, où j'étais seul chez moi.

WP-Box: Travailler avec un spécialiste des technologies WordPress !
Hors ligne
#4 21-01-2007 21:50:42
Re: [tuto] Integre ZenPhoto dans WordPress
Fonctionne pas pour la version 2.0.7 de Wordpress + ZenPhoto 1.06 la premiere étape bug.
http://www.kipari.fr/2006100406
j'obtien le theme, mais j'ai un bug .php
Code:
- Warning: main(themes/pure_default/pure-template-functions.php) [function.main]: failed to open stream: No such file or directory in /homepages/25/d174988310/htdocs/photos/themes/default-dark/index.php on line 25
- Fatal error: main() [function.require]: Failed opening required 'themes/pure_default/pure-template-functions.php' (include_path='.:/usr/local/lib/php') in /homepages/25/d174988310/htdocs/photos/themes/default-dark/index.php on line 25
Merci ....
De toute façon apres va faloir teste de meme sur la 2.1 de wordpress. donc voila. comme je te disai Dean dans un email un jour... je peut tester simplement pour t'aider a amélioré.. mais je ne peut corriger les erreur ne connaissant les langages helas... 
Dernière modification par Vincenzo (21-01-2007 21:51:15)
Hors ligne
#5 28-02-2007 01:59:18
- teyoko
- Membre WP
- Date d'inscription: 27-02-2007
- Messages: 1
Re: [tuto] Integre ZenPhoto dans WordPress
Salut,
effectivement la première étape ne fonctionne pas car le code n'est plus le meme.
J'utilise WP 2.1.1 FR + Zenphoto 1.0.7 beta
Serait t'il possible de faire un tuto pour WP 2.1 ???
J'ai aussi Gallery mais c'est une vrai usine a gaz ca, c'est trop puissant pour ce que je veux faire 
Hors ligne
#6 17-08-2007 18:16:09
- guest-star
- Connaisseur WP
- Date d'inscription: 07-08-2007
- Messages: 22
Re: [tuto] Integre ZenPhoto dans WordPress
Salut Dean,
Excellement bien expliqué le tuto!
Seulement voici l'erreur que je rencontre:
Warning: main(/kunden/homepages/24/d212364777/htdocs/zenphoto/zenphoto/zen/config.php) [function.main]: failed to open stream: No such file or directory in /homepages/24/d212364777/htdocs/wp-content/plugins/zen.php on line 48
Fatal error: main() [function.require]: Failed opening required '/kunden/homepages/24/d212364777/htdocs/zenphoto/zenphoto/zen/config.php' (include_path='.:/usr/local/lib/php') in /homepages/24/d212364777/htdocs/wp-content/plugins/zen.php on line 48
je suis sous WP 2.2.1 et zenphoto 1.0.1 beta.
Cela proviendrai til d'un probleme de compatibilité?
Merci
Guest.
Hors ligne
#7 26-08-2007 23:33:29
Re: [tuto] Integre ZenPhoto dans WordPress
je te conseil d'utiliser la dernière version de zenphoto
Hors ligne
#8 26-08-2007 23:35:03
Re: [tuto] Integre ZenPhoto dans WordPress
Intégration de wordpress 2.2.2 avec zenphoto 1.0.7 (les dernières versions à ce jour)
Je ne suis pas rentré dans les détails cette fois ci...
Il faut au préalable avoir installé wordpress 2.2.2 et zenphoto 1.0.7
Remplacer les fichiers index.php album.php et image.php et zen.css par les suivants (fichier rar)
Télécharger les fichiers
Les éditer selon votre configuration d'installation de wordpress et zenphoto
Dans cet exemple:
Wordpress est installé dans le dossier wordpressfr du site (www.monsite.fr/wordpressfr)
il faut donc remplacer à la ligne 3, wordpressfr par votre répertoire d'installation
Si Wordpress est à la racine, remplacer la ligne 3 par la suivante:
require($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php');
dans zp-config.php de zenphoto réduisez la taille de l'image (vers ligne 82)
ex:
$conf['image_size'] = 400;

Dernière modification par dean (26-08-2007 23:35:28)
Hors ligne
#10 29-04-2008 23:35:30
Re: [tuto] Integre ZenPhoto dans WordPress
MISE A JOUR faite pour Wordpress 2.5.1 et Zenphoto 1.1.5 (dernières versions au 29/04/2008) 
Hors ligne






