PubliĂ© par le 11 juin 2019 ‱ 15 Commentaires ‱ Read in English

Il n’est pas aussi connu que des sportifs ou des chanteurs cĂ©lĂšbres.

Mais s’il continue sur sa lancĂ©e, il pourrait l’ĂȘtre un jour, tant sa croissance est vertigineuse.

Lui, c’est OceanWP, “un thĂšme gratuit de qualitĂ© avec des caractĂ©ristiques premium”, comme l’explique la page A Propos du site qui lui est dĂ©diĂ©.

Avec plus de 400 000 installations actives et une ribambelle d’avis positifs – 2 309 notes de 5 Ă©toiles sur 2 341 avis laissĂ©s au moment d’écrire ces lignes -, notre thĂšme du jour est tout simplement incontournable sur le rĂ©pertoire officiel WordPress.

Le genre de truc Ă  cĂŽtĂ© duquel vous n’avez vraiment pas envie de passer.

Une petite fille fait non du doigt

Mais avant de vous jeter dessus tel un mort de faim (sur le thĂšme, pas le gĂąteau de cette petite fille), vous devez savoir si vous pouvez miser sur notre cheval pour vos prochains projets.

Pour vous aider, j’ai enfilĂ© ma plus belle casaque pour vous servir un test dĂ©taillĂ©.

Comme je l’ai fait dans les articles consacrĂ©s Ă  GeneratePress et Ă  Astra, je vais notamment vous parler de :

  • la maniabilitĂ© d’OceanWP
  • son impact sur la performance et le SEO
  • ou encore de son rapport qualitĂ©-prix

OceanWP, un thùme gratuit vraiment
 premium

J’y reviendrai en dĂ©tails un peu plus loin dans cet article, mais OceanWP est un thĂšme un peu Ă  part.

Il ne propose pas de version Pro Ă  proprement parler, mais des extensions payantes (add-ons) qui ajoutent des fonctionnalitĂ©s Ă  son thĂšme gratuit (ex : un en-tĂȘte fixe, des widgets pour Elementor, une marque blanche etc.).

Exactement comme le fait WooCommerce, par exemple.

Nicolas Lecocq, le créateur du thÚme, explique avoir opté pour ce business model afin de se démarquer de la grande majorité de ses concurrents (la plupart vendent des thÚmes freemium ou premium).

Depuis le lancement du thĂšme, fin 2016, “ce modĂšle a trĂšs bien marchĂ© pour lui”, comme il l’a affirmĂ© dans cet article.

Difficile de le contredire au moment de se pencher un peu plus sur le sujet. En à peine deux ans, la progression d’OceanWP est exponentielle.

Si l’on excepte les thĂšmes WordPress natifs (Twenty Nineteen, Twenty Seventeen etc.), OceanWP est tout simplement le thĂšme le plus populaire du rĂ©pertoire officiel.

OceanWP sur le répertoire officiel WordPress

Les chiffres donnent le tournis. InstallĂ© sur plus de 400 000 sites, OceanWP jouit aussi d’une sacrĂ©e cote auprĂšs de ses utilisateurs.

Il est quasi-impossible de lui trouver des détracteurs.

Mais alors, qu’est-ce qui rend les gens si accros ? La page d’accueil du thĂšme donne quelques Ă©lĂ©ments de rĂ©ponse. OceanWP serait :

  • Totalement responsive.
  • LĂ©ger et trĂšs trĂšs rapide Ă  charger.
  • Compatible WooCommerce : il prĂ©tend ĂȘtre le “meilleur ami de WooCommerce”.
  • ComposĂ© de trĂšs nombreuses dĂ©mos activables en quelques clics.
  • Conçu en respectant les meilleures pratiques SEO.
  • DotĂ© d’un support gĂ©nial.
  • Compatible avec les langages RTL et traduisible dans n’importe quelle langue.
  • Compatible avec tous les meilleurs constructeurs de page du marchĂ©.

Sur le papier, ces arguments restent intéressants mais somme toute assez classiques et aguicheurs : il faut bien vendre sa soupe. Mais est-elle vraiment bonne ?

Comme ajoute Nicolas Lecocq, “avec OceanWP, n’importe qui peut crĂ©er un joli site web professionnel, peu importe son expĂ©rience en matiĂšre de webdesign et dĂ©veloppement”.

Alex n’est pas aussi catĂ©gorique. Dans la vidĂ©o de L’Instant ThĂšme consacrĂ©e Ă  OceanWP, sur la chaĂźne YouTube de WPMarmite, il ne le conseillerait pas aux dĂ©butants, en raison de ses nombreuses options au sein desquelles il est facile de se perdre.

Maintenant, il ne vous reste plus qu’à vous faire votre propre opinion en lisant les prochaines lignes.

DĂ©marrons par la maniabilitĂ© du thĂšme, avec un p’tit tuto d’installation d’OceanWP.

Quelle maniabilité ?

Processus d’installation du thĂšme

L’option la plus simple consiste à passer par votre Tableau de bord WordPress.

Dirigez-vous sur Apparence > ThĂšmes. Puis en haut de la page, cliquez sur Ajouter.

Dans la barre de recherche, entrez OceanWP, puis installez et activez le thĂšme.

Ajouter OceanWP

Si tout se passe bien, OceanWP devrait ensuite vous recommander d’installer 3 plugins :

  • Elementor : un cĂ©lĂšbre constructeur de page qu’Eleonor vous a prĂ©sentĂ© sur le blog de WPMarmite.
  • Ocean Extra : ce plugin ajoute des fonctionnalitĂ©s supplĂ©mentaires au thĂšme OceanWP telles que des widgets, des boĂźtes de mĂ©tas, activer/dĂ©sactiver les sections de l’outil de personnalisation, activer/dĂ©sactiver les scripts & styles du thĂšme, importer/exporter et un panneau pour activer les extensions premium.
  • WP Forms : un plugin qui installe un formulaire de contact.
Extensions recommandées lors de l'installation d'OceanWP

Je vous conseille de suivre les recommandations du dĂ©veloppeur, ou au moins d’installer Ocean Extra, car cette extension va notamment dĂ©clencher le lancement d’un assistant de configuration.

Lancement de l'assistant de configuration

Note

Si vous passez outre les recommandations du développeur, vous vous retrouverez avec le thÚme de base, que vous pourrez ensuite personnaliser comme bon vous semble, bien sûr.

Accueil du thÚme OceanWP installé
Un aperçu du thÚme installé sans aucuns réglages

Allez, revenons Ă  nos moutons. En cliquant sur Lancer l’assistant de configuration, un requin bodybuildĂ© vous accueille en vous saluant de la nageoire : cliquez sur le bouton bleu Commencer.

DĂ©but de l'assistant de configuration

PrĂȘt pour 4 Ă©tapes ? C’est parti.

Etape 1 : le choix d’une dĂ©mo. Il y en a 13 au total couvrant plusieurs domaines (Blog, Business, Sport, One Page, Ecommerce).
Comme j’aime bien le sport, je suis parti sur le modĂšle Gym (vous n’ĂȘtes pas obligĂ© de choisir une dĂ©mo et pouvez aussi directement passer Ă  l’étape Personnaliser, si vous le souhaitez).

Etape 2 : l’installation d’extensions “nĂ©cessaires”. Il est ici prĂ©cisĂ© qu’« il est recommandĂ© de tĂ©lĂ©verser les donnĂ©es d’exemples sur une nouvelle installation WordPress pour Ă©viter les conflits avec votre contenu actuel.”
Le thùme est gratuit mais on me recommande d’installer Ocean Sticky Header et Ocean Elementor Widgets, qui sont deux modules
 premium vendus 9,99$ (environ 9€).

Modules premium sur l'assistant d'installation

J’active juste l’extension Ocean Social Sharing et j’importe mes donnĂ©es au bas de la page.
Chez moi, l’importation a mis moins d’une minute.

Etape 3 : vous pouvez à présent commencer à personnaliser votre site en ajoutant votre logo, une favicon, un slogan, ou encore en choisissant vos couleurs principales.

Etape 4 : votre site web est prĂȘt. Si vous voulez aller plus loin, un guide vidĂ©o bonus vous est proposĂ© en Ă©change de votre adresse email. VoilĂ  un formulaire d’opt-in bien senti 😉

Il ne vous reste plus qu’à cliquer sur le bouton Voir votre site web pour dĂ©couvrir le rĂ©sultat final.

Site web prĂȘt assistant installation

Alors, résultat des courses ?

Commençons par les points positifs de ce processus d’installation. Je trouve que l’assistant est trĂšs utile pour les dĂ©butants.

On est pris par la main et chaque Ă©tape est vraiment claire. Au final, si l’on choisit d’installer une dĂ©mo prĂ©-conçue, on obtient un site tout-prĂȘt avec plusieurs pages sans avoir rien fait, ou presque.

Mais, il y a quand mĂȘme un mais, justement.

En y regardant de plus prĂšs, j’ai remarquĂ© que certaines sections Ă©taient vides sur mon site fraĂźchement installĂ©.

Un exemple ? Le tableau de prix. Regardez, à part le titre et le sous-titre, il n’y a rien.

Table des prix
Mais oĂč sont passĂ©s les prix ?

En fait, c’est le plugin premium Ocean Elementor Widgets qui aurait dĂ» faire le travail.

Mais comme je ne l’ai pas installĂ© prĂ©cĂ©demment, on se retrouve avec cet espace vide, sans l’affichage des prix.

Un peu dommage, pour un thĂšme qui se revendique totalement gratuit.

Pour le processus d’installation, vous ĂȘtes pas mal. Je vous propose dĂ©sormais de dĂ©couvrir ce que nous cachent les options du thĂšme, sur le Tableau de bord.

À la dĂ©couverte du Tableau de bord

Vous retrouverez les options du thÚme sur le menu Theme Panel, situé sur la colonne de gauche de votre administration WordPress.

Mais attention, cela sera le cas uniquement si vous avez installĂ© l’extension Ocean Extra juste aprĂšs l’activation du thĂšme. D’oĂč l’importance de le faire. J’espĂšre que vous suivez 😉

Le Theme Panel d'OceanWP

Six options vous sont proposées :

  • Theme Panel : vous y retrouvez diverses sections de l’outil de personnalisation (le fameux Customiseur WordPress) que vous pouvez activer ou dĂ©sactiver pour amĂ©liorer le temps de chargement.
    Des liens vous permettent aussi de personnaliser rapidement certains aspects de votre site (ex : logo, typographie, couleurs, barre latérale etc.). Je trouve dommage que plusieurs messages pour vous encourager à vous procurer les extensions premium rendent la page un peu moins lisible.
    Panneau du thĂšme
  • Ma bibliothĂšque : elle vous permet de crĂ©er vos propres modĂšles de pages que vous pouvez ensuite utiliser Ă  l’envi, grĂące Ă  un shortcode.
  • Scripts & styles : cette option vous permet d’activer ou de dĂ©sactiver en 1 clic les scripts CSS et JavaScript que vous ne souhaitez pas utiliser. C’est trĂšs utile pour amĂ©liorer la vitesse de chargement de vos pages : bien vu !
  • Importer/Exporter : permet d’importer ou d’exporter les rĂ©glages de votre site dans un fichier .dat.
  • Installer des dĂ©mos : vous retrouvez ici les 13 dĂ©mos que vous avez dĂ©couvertes pendant le processus d’installation du thĂšme. Il est possible de les prĂ©visualiser, puis de les activer trĂšs facilement en quelques clics.
  • Extensions : prĂ©sente les 13 extensions OceanWP premium du thĂšme. Vous les dĂ©couvrirez en dĂ©tails un peu plus tard.
  • Sans transition, passons Ă  l’étape suivante : la personnalisation du thĂšme. Vous allez mettre les mains dans le cambouis, c’est moi qui vous le dis !

La personnalisation du thĂšme

L’outil de personnalisation

Sur OceanWP, la trĂšs grande majoritĂ© des rĂ©glages s’effectue depuis l’outil de personnalisation, ce qui est vraiment trĂšs apprĂ©ciable.

Cela vous facilite la vie car tout est centralisĂ© au mĂȘme endroit.

Pour info, vous retrouverez l’Outil de personnalisation en vous rendant dans Apparence > Personnaliser.

L'outil de personnalisation du thĂšme

Comme vous pouvez le constater, les options sont trĂšs nombreuses. Au total, il y a 14 “menus” principaux diffĂ©rents, ce qui est particuliĂšrement abondant pour un thĂšme gratuit.

A titre de comparaison, Astra et GeneratePress, qui sont deux thùmes au profil assez similaire à OceanWP, disposent de moins d’options à ce niveau, dans leur version gratuite.

Au sein de cet outil de personnalisation, donc, vous retrouverez certains rĂ©glages classiques (IdentitĂ© du site, Menus, RĂ©glages de la page d’accueil, Widgets etc.).

Je ne vais pas m’y attarder dessus, sachant qu’Alex vous propose dĂ©jĂ  un aperçu dĂ©taillĂ© des options dans cette vidĂ©o :

Ici, on va plutÎt développer quelques fonctionnalités qui me semblent majeures, et qui méritent le détour.

Options générales

Parmi les éléments intéressants de ce menu, je pourrais vous citer :

  • La possibilitĂ© de personnaliser le style de mise en page (large, encadrĂ© ou sĂ©parĂ©). Pouvoir afficher votre contenu en pleine largeur est trĂšs intĂ©ressant, notamment si vous couplez le thĂšme Ă  un constructeur de page par la suite. Il est aussi possible de rĂ©gler au pixel prĂšs la largeur de votre contenu et de votre barre latĂ©rale. Pour cette derniĂšre, vous avez le choix entre l’affichage d’une ou deux barres latĂ©rales (Ă  gauche ou Ă  droite), ou pas de barre latĂ©rale du tout.
  • Les nombreuses options pour crĂ©er une flĂšche Back to top (Retour vers le haut de la page). 10 icĂŽnes sont proposĂ©es, et vous pouvez mĂȘme aller jusqu’à personnaliser le rayon de la bordure. Retour vers le haut
  • Le contrĂŽle total sur votre page d’erreur 404, si vous le souhaitez, grĂące Ă  l’utilisation d’un template crĂ©Ă© au prĂ©alable dans votre BibliothĂšque issue du Theme Panel.

Barre supérieure

Comme son nom l’indique, cette option vous permet d’activer et de personnaliser une Barre supĂ©rieure sur votre site.

Cela peut ĂȘtre utile pour afficher certaines infos de contact Ă  vos visiteurs dĂšs leur arrivĂ©e sur votre site (numĂ©ro de tĂ©lĂ©phone, adresse, email etc.), ou encore vos rĂ©seaux sociaux.

Vous pouvez bien sĂ»r modifier les couleurs d’arriĂšre-plan du texte, des liens etc., et choisir de dĂ©sactiver cette barre supĂ©rieure sur certains appareils (ex : smartphones et tablettes).

En-tĂȘte

En-tĂȘte (header) est un menu que j’ai trouvĂ© vraiment super. Les options sont vraiment trĂšs poussĂ©es.

Par exemple, il est possible, parmi les 8 styles proposĂ©s, de crĂ©er un en-tĂȘte transparent afin que ce dernier se fonde dans une image d’arriĂšre-plan, ou une vidĂ©o.

Il est mĂȘme possible de rĂ©gler sa hauteur et d’installer un en-tĂȘte personnalisĂ©, grĂące Ă  un template que vous aurez crĂ©Ă© au prĂ©alable dans votre BibliothĂšque.

RĂ©glages de l'en-tĂȘte

Par ailleurs, vous pouvez Ă©galement :

  • TĂ©lĂ©charger un logo Retina et rĂ©gler la hauteur et la largeur de votre logo directement depuis l’outil de personnalisation. PlutĂŽt pratique.
  • ParamĂ©trer une dizaine d’effets sur les liens de votre menu. Regardez ce que ça donne avec celui appelĂ© Triple point sous : Triple point menu
  • GĂ©rer finement les points de rupture, c’est-Ă -dire le moment oĂč vous souhaitez afficher le menu mobile, ainsi qu’afficher un logo diffĂ©rent pour les mobiles et tablettes.
  • Personnaliser votre menu mobile dans les grandes largeurs en choisissant notamment de l’afficher dans une colonne latĂ©rale, un menu dĂ©roulant ou en plein Ă©cran. Vous pouvez aussi modifier son icĂŽne et ses couleurs.

Blog

La partie Blog est hautement personnalisable. Pour commencer, vous pourrez agir sur 2 niveaux : EntrĂ©es du blog – c’est-Ă -dire la page oĂč sont listĂ©s tous vos articles -, et Article unique, qui permet d’effectuer des rĂ©glages sur les articles en eux-mĂȘmes.

Les options de ces deux “menus” sont quasi-identiques. Parmi elles, j’ai apprĂ©ciĂ© le fait :

  • De pouvoir glisser-dĂ©poser les Ă©lĂ©ments de votre choix (Titre, contenu, image mise en avant etc.) et de les dĂ©sactiver en 1 clic. Blog d'OceanWP
  • D’avoir le choix du style de pagination du blog (Standard, DĂ©filement infini, Suivant/PrĂ©cĂ©dent).
  • De pouvoir rĂ©gler la longueur de l’extrait.
  • D’afficher ou non des barres latĂ©rales et votre contenu en pleine largeur.
  • De proposer un module pour afficher des contenus similaires. Cela peut ĂȘtre utile pour crĂ©er des liens internes, et donc pour votre rĂ©fĂ©rencement. Et cela vous Ă©vite aussi d’activer une extension supplĂ©mentaire pour remplir cette tĂąche.

Pied de page

En fonction du thĂšme que vous utilisez, personnaliser votre pied de page (footer) peut parfois s’avĂ©rer fastidieux, surtout si vous avez peu de connaissances en code.

Souvent, la premiĂšre chose que l’on souhaite modifier pour rendre son site plus professionnel, c’est le Copyright. Et il n’est pas toujours Ă©vident d’y parvenir sans passer par certains fichiers du core (coeur) de WordPress.

A ce niveau-lĂ , OceanWP vous facilite la tĂąche. Via son menu Bas du pied de page (toujours dans l’Outil de personnalisation), il est possible d’entrer le texte de votre choix, sans vous embĂȘter Ă  mettre les mains dans le cambouis.

Bas du pied de page

Autres possibilités trÚs intéressantes :

  • Vous pouvez ajouter des codes courts (shortcodes) pour afficher certains Ă©lĂ©ments comme une barre de recherche, un panier si vous avez une boutique e-commerce, un bouton pour vous connecter/dĂ©connecter etc.
  • Il est possible de masquer le pied de page sur certains appareils (ex: smartphones et/ou tablettes).
  • Vous pouvez modifier les couleurs d’arriĂšre-plan, du texte et des liens.
  • Vous pouvez ajouter jusqu’à 4 colonnes de widgets (grĂące au menu Widgets de pied de page) pour afficher certains Ă©lĂ©ments de votre choix (ex : icĂŽnes de rĂ©seaux sociaux, menu etc.).

Jusqu’ici, vous avez dĂ©couvert des fonctionnalitĂ©s natives du thĂšme, intĂ©grĂ©es dans l’Outil de personnalisation.

Sachez qu’OceanWP est aussi modulable et bĂ©nĂ©ficie d’options additionnelles dont vous pouvez profiter en activant des extensions spĂ©cifiques, gratuites et premium.

Commençons par les gratuites, à découvrir juste en-dessous. Allez, on scrolle !

Les extensions gratuites

Au moment d’écrire ces lignes, OceanWP en propose 8. Vous pouvez les retrouver depuis l’interface d’administration de votre Tableau de bord (Menu Extensions), ainsi que sur le rĂ©pertoire officiel WordPress.

Parmi elles, on peut notamment détacher :

Ocean Extra

Ocean Extra

Encore une fois, je vais me rĂ©pĂ©ter, mais mieux vaut deux fois qu’une : selon moi, Ocean Extra est juste incontournable si vous utilisez le thĂšme, alors installez cette extension (qui sera par ailleurs nĂ©cessaire pour activer
 d’autres extensions propres Ă  OceanWP).

Son gros plus rĂ©side dans l’ajout de boĂźtes de mĂ©tas, c’est-Ă -dire un encart RĂ©glages Ă  la fin de chaque article, page ou type de contenu personnalisĂ© (custom post type).

Cela peut-ĂȘtre trĂšs utile pour crĂ©er des pages sur-mesure.

Parmi les options proposées ici, vous pourrez notamment :

  • Mettre en place une mise en page personnalisĂ©e et activer/dĂ©sactiver les barres latĂ©rales.
  • Ajouter des shortcodes (dans l’en-tĂȘte, la barre supĂ©rieure, le pied de page etc.).
  • Activer/dĂ©sactiver le titre de la page, les widgets ou encore le copyright.
  • Afficher ou non un menu en particulier.
OceanWP réglages

Ocean Social Sharing

Ocean Social Sharing

Faisons maintenant une petite halte sur l’extension Ocean Social Sharing.

Comme son nom l’indique, elle ajoute des boutons de partage au sein de vos articles.

Les principaux réseaux sociaux sont présents (Facebook, Twitter, LinkedIn etc.) et les options de personnalisation sont assez sympathiques pour un plugin gratuit.

Partage social

Vous remarquerez qu’il est possible de choisir la position de vos icĂŽnes (avant, aprĂšs, ou avant et aprĂšs le contenu), d’afficher le nom du rĂ©seau social, d’inscrire le texte introductif de votre choix (ex : partagez sur les rĂ©seaux sociaux), de modifier le style des boutons (minimal, colorĂ© ou foncĂ©) et leur marge.

Bref, c’est vraiment pas mal. Petit bĂ©mol, quand mĂȘme : il n’est pas possible d’afficher vos boutons de partage sur des pages.

Pour une solution complÚte, vous devrez utiliser une extension dédiée comme Social Warfare, par exemple.

Tiens, en parlant de rĂ©seaux sociaux, sachez que si vous utilisez WooCommerce ou Easy Digital Downloads, OceanWP propose aussi l’extension Ocean Product Sharing, qui permet “d’ajouter des boutons de partage social Ă  votre page produit”.

Custom Sidebar

Ocean Custom Sidebar

GrĂące Ă  Ocean Custom Sidebar, vous allez pouvoir crĂ©er le nombre de sidebars de votre choix et les placer oĂč vous le souhaitez.

Une fois activé, une option Colonnes latérales apparaßt dans le Theme Panel. Donnez un nom à votre sidebar (ex : sidebar test), puis retrouvez-la dans vos widgets (menu Apparence > Widgets).

Sidebar test

Pour un tour d’horizon tout à fait exhaustif, vous trouverez aussi les extensions gratuites suivantes :

  • Ocean Stick Anything, pour rendre fixe n’importe quel Ă©lĂ©ment de votre site, grĂące Ă  sa classe CSS.
  • Ocean Posts Slider, qui permet d’afficher vos derniers articles dans un diaporama. Pourquoi pas, mais gare aux sliders, qui peuvent ralentir votre site.
  • Ocean Modal Window, pour crĂ©er une fenĂȘtre modale – qui s’affiche sur toute la largeur de votre Ă©cran au clic – dans laquelle insĂ©rer le contenu de votre choix.

Note

Ocean Demo Import, qui permet d’importer le contenus des dĂ©mos de sites, est toujours proposĂ©e au tĂ©lĂ©chargement, mais Ocean Extra propose dĂ©jĂ  une option pour le faire.

Les extensions d’OceanWP Premium

Pour encore plus de choix, OceanWP propose Ă©galement 13 extensions Premium.

Vous pouvez :

  • soit les acheter Ă  l’unitĂ© (9,99$/an)
  • soit vous procurer un pack global, une sorte d’OceanWP Pro, contenant les 13 extensions Premium + 20 dĂ©mos de sites, Ă  partir de 34,99$/an (environ 31€). C’est en tout cas le prix proposĂ© lorsque vous ajoutez une extension seule dans votre Panier.
Extensions premium prix

On les a toutes testées, en voici trois qui me semblent incontournables pour commencer à personnaliser votre site, notamment si vous débutez.

Cela ne signifie pas que les autres sont dĂ©nuĂ©es d’intĂ©rĂȘt. Simplement, elles rĂ©pondent Ă  des besoins plus techniques et spĂ©cifiques, comme vous le verrez juste aprĂšs.

Elementor Widgets

Elementor Widgets

Cette extension ajoute une cinquantaine de modules au constructeur de pages qui compte le plus d’installations actives sur le rĂ©pertoire officiel (+ de 2 millions !).

Vous pourrez par exemple ajouter :

  • Des tableaux de prix.
  • Des titres animĂ©s.
  • Des formulaires de connexion.
  • Des listes de prix etc.
Aperçu du builder d'Elementor

Au niveau de l’intĂ©gration, tout est fluide et on ne perd pas en intuitivitĂ©. Je n’ai dĂ©plorĂ© aucun temps de latence.

Sticky header

Sticky header

Nativement, OceanWP ne permet pas de crĂ©er ce que l’on appelle un sticky menu, soit un menu qui reste collĂ© en haut de l’écran, mĂȘme quand l’utilisateur scrolle dans la page.

Cette fonctionnalité est trÚs utile pour faciliter la navigation de vos visiteurs et les inciter à rester sur votre page.

En premium, il est possible d’y parvenir grĂące Ă  l’extension Sticky header. Une fois que vous l’aurez activĂ©e, un nouveau menu sobrement baptisĂ© EntĂȘte collante apparaĂźtra au bas de l’Outil de personnalisation.

J’ai notamment trouvĂ© pas mal le fait de pouvoir ajouter un logo lorsque le menu devient sticky.

GrĂące Ă  l’extension Ocean Sticky Footer, il est aussi possible de rendre votre footer sticky, comme vous l’avez fait avec l’en-tĂȘte.

Et pour aller encore plus loin, le plugin Footer Callout ajoute une barre d’appel à l’action au sein de laquelle vous pouvez ajouter du texte et un bouton, tous deux facilement personnalisables (couleur, typographie).

Vous la trouverez sous l’appellation Bloc d’appel en pied de page dans l’Outil de personnalisation.

Et voilĂ  ce que donne son intĂ©gration au sein d’une page :

Bouton appel Ă  l'action footer

Side Panel

Side Panel

L’extension Side Panel (appelĂ©e Panneau latĂ©ral dans l’Outil de personnalisation) permet de concevoir un genre de sidebar qui ne s’ouvrira que lorsque votre visiteur cliquera sur un bouton.

A l’intĂ©rieur, vous pouvez y glisser les widgets de votre choix. Pas mal pour ajouter du contenu additionnel que vous ne souhaitez pas forcĂ©ment afficher automatiquement dans le corps de votre page.

Vous laissez ainsi Ă  vos visiteurs le choix d’en dĂ©couvrir plus ou non.

Panneau latéral

Parmi les extensions Premium, vous trouverez aussi :

  • Ocean Hooks. J’avais prĂ©vu d’un peu plus vous parler de ce plugin, mais en le testant, il m’a semblĂ© complexe pour un dĂ©butant. Mais rien ne vous empĂȘche de vous faire votre propre avis 😉 Pour rappel, un hook (un hameçon, en français), est un point d’entrĂ©e dans une fonction WordPress. Avec Ocean Hooks, vous allez donc pouvoir ajouter des morceaux de code personnalisĂ©s afin d’aller encore plus loin que ce que proposent les extensions, et sans utiliser de thĂšme enfant. Si vous connaissez bien le code, cette extension devrait vous plaire.
  • WooPopup, qui affiche une fenĂȘtre pop-up (qui s’affiche en surbrillance de la page) sur votre boutique WooCommerce, lorsqu’un visiteur ajoutera un produit dans son Panier.
  • White Label. Cette extension permet de remplacer la marque OceanWP par le nom de votre choix, comme celui de votre entreprise, notamment au niveau de l’administration et du nom du thĂšme.
  • Portfolio, pour crĂ©er une galerie d’images.
  • Full Screen. Cette extension affiche votre page en plein Ă©cran au scroll, mais elle fonctionne uniquement si Elementor est activĂ©.
  • Cookie Notice, qui ajoute un bandeau pour informer vos utilisateurs que votre site utilise des cookies et qu’il est conforme Ă  la rĂ©glementation RGPD.
  • Popup Login permet d’ajouter un formulaire pour demander Ă  vos visiteurs de se connecter Ă  votre site.
  • Instagram, pour afficher votre fil de photos publiĂ©s sur le rĂ©seau social.

En conclusion, que retenir des extensions Premium ?

De façon gĂ©nĂ©rale, je trouve d’abord qu’il n’est pas toujours simple de s’y retrouver : certaines d’entre elles se paramĂštrent depuis le Tableau de bord, d’autres depuis l’Outil de personnalisation (pour la majoritĂ© d’entre elles, c’est le cas).

Ensuite, je dirais que certaines extensions gratuites disponibles sur le rĂ©pertoire officiel peuvent ĂȘtre tout aussi efficaces. Par exemple, Cookie Notice for GDPR peut remplacer Cookie Notice ; Instagram Feed n’a rien Ă  envier au Instagram d’OceanWP.

Les démos de sites

Comme je vous l’ai dĂ©taillĂ© lors du processus d’installation, la version gratuite du thĂšme donne accĂšs Ă  13 dĂ©mos de sites (OceanWP theme demos, en anglais).

Pour rappel, il s’agit de templates prĂȘts Ă  l’emploi, activables en 1 clic, qui vont installer un site complet en un claquement de doigts (ou presque).

La version Premium propose une soixantaine de modùles de templates d’OceanWP en plus, par rapport à l’offre gratuite.

Pour les installer, il suffit d’activer l’extension Pro Demos contenue dans l’une des trois offres Premium (je vous les dĂ©taille dans la Partie sur les tarifs, un peu plus bas).

De nouveaux modĂšles viennent donc gonfler l’offre proposĂ©e dans les catĂ©gories de base (Business, Blog, Sport, One Page, Ecommerce).

Mais la majoritĂ© d’entre-eux garnissent deux nouvelles catĂ©gories appelĂ©es Corporate et Coming Soon.

Les templates Corporate vous permettront d’activer des sites à destination des professionnels dans tout un tas de domaines (coiffeurs, agences web, restaurant, photographie, mariage, photo, fitness, fleuriste etc.).

Enfin, comme le nom le suggĂšre, les templates Coming Soon vous donnent la possibilitĂ© de mettre en place des pages Coming Soon, c’est-Ă -dire des pages de maintenance avant le lancement d’un site, par exemple.

Pro demos

Cette fois, vous en avez terminé avec la personnalisation du site.

Désormais, je vous propose de découvrir comment le thÚme se comporte avec les constructeurs de page et les plugins.

Quelle adaptation aux constructeurs de page et aux plugins ?

OceanWP et les constructeurs de page

Comme l’explique la page d’accueil du site d’OceanWP, le thĂšme de Nicolas Lecocq a Ă©tĂ© “façonnĂ© pour fonctionner avec les meilleurs constructeurs de page du marchĂ©â€.

Pour vous en persuader, les logos de cĂ©lĂšbres page builders comme Elementor, Divi ou encore Beaver Builder sont d’ailleurs affichĂ©s ostensiblement.

Les constructeurs de page recommandés

En revanche, ce que l’on peut vous affirmer avec certitude, c’est qu’OceanWP a son premier de la classe : Elementor.

D’abord, comme vous l’avez constatĂ©, OceanWP vous demande trĂšs souvent de l’installer pour que ses dĂ©mos puissent fonctionner correctement.

Ensuite, le thĂšme dispose d’une extension premium spĂ©cifique, Elementor Widgets, que vous avez dĂ©couverte un peu plus haut, en principe.

Mais Elementor le lui rend bien Ă©galement. Dans sa documentation, le constructeur de page prĂ©cise qu’OceanWP est l’un des thĂšmes qui fonctionne le mieux avec lui.

Enfin, au-delĂ  de ces Ă©changes d’amabilitĂ©, sachez qu’OceanWP reste trĂšs pratique Ă  utiliser avec un constructeur de page, de façon globale.

GrĂące Ă  l’encart RĂ©glages prĂ©sent au sein de chaque page, vous pouvez notamment contrĂŽler la mise en page en affichant votre contenu en pleine largeur, en dĂ©sactivant les sidebars, le titre de vos pages etc.

OceanWP et WooCommerce

Au sein de l’écosystĂšme WordPress, OceanWP a aussi trĂšs bonne presse en raison de son excellente compatibilitĂ© avec WooCommerce.

En effet, il propose de nombreuses fonctionnalités pour personnaliser votre boutique en ligne.

Pour en profiter, vous devez avoir activé WooCommerce, au préalable.
Avec la version Premium d’OceanWP, vous disposez de 12 dĂ©mos prĂȘtes Ă  l’emploi pour votre boutique e-commerce, dans divers domaines (Services, livres, bijouterie, streetfood, chaussures etc.).

Les rĂ©glages s’opĂšrent depuis l’Outil de personnalisation, ce qui est assez rare Ă  trouver chez des thĂšmes concurrents.

Ils sont de plus assez intuitifs et pratiques pour les débutants. Par exemple, vous pouvez changer la position des éléments récapitulatifs (Prix, Note, Extrait, Ajouter au panier etc.) en les glissant-déposant.

OceanWP dispose aussi de plusieurs options natives pour favoriser l’expĂ©rience utilisateur et inciter Ă  la conversion.

Par exemple, une fenĂȘtre pop-up s’affichera pour inciter vos visiteurs Ă  valider leur commande lorsqu’ils survoleront leur Panier.

FenĂȘtre pop-up sur le Panier

L’option Vue rapide permet quant Ă  elle d’afficher des informations dĂ©taillĂ©es sur un produit, sans que votre visiteur n’ait Ă  quitter la page.

En parlant de WooCommerce, si vous comptez mettre sur pied en boutique en ligne prochainement, je vous invite Ă  dĂ©couvrir cette vidĂ©o d’Alex :

WooCommerce étant un plugin, la transition est toute trouvée pour terminer cette partie.

Qu’en est-il de la compatibilitĂ© d’OceanWP avec les extensions ?

En principe, vous ne rencontrerez aucun problÚme avec les plugins présents sur le répertoire officiel WordPress.

MĂȘme si, comme vous le savez sĂ»rement, personne n’est Ă  l’abri d’un bug au moment d’une installation ou d’une mise Ă  jour. Si cela vous arrive, vous pouvez toujours vous rĂ©fĂ©rer Ă  notre guide sur les erreurs WordPress pour vous sortir de l’impasse.

OceanWP et Gutenberg

Pour finir, qu’en est-il de la compatibilitĂ© d’OceanWP avec Gutenberg, le cĂ©lĂšbre et controversĂ© Ă©diteur de contenus apparu avec la version 5.0 de WordPress ?

Aucun souci de ce cĂŽtĂ©-lĂ  Ă  signaler. Vous pouvez crĂ©er vos pages et vos articles sans risque d’ĂȘtre bloquĂ©.

Quelle expérience utilisateur pour un site utilisant OceanWP ?

Performance

PossĂ©der un site rapide est trĂšs important pour favoriser l’expĂ©rience utilisateur de vos visiteurs.

Par exemple, on estime que 40% des internautes quittent un site web s’il met plus de 3 secondes à charger.

Mais le temps de chargement peut aussi impacter votre positionnement sur les moteurs de recherche.

Pour positionner une page, Google se base sur plus de 200 critĂšres, dont la vitesse de votre page.

Alors autant vous dire que le thĂšme que vous allez choisir va devoir assurer Ă  ce niveau-lĂ .

Parmi les raisons d’aimer OceanWP, la page d’accueil du thùme met notamment en avant un temps de chargement trùs rapide.

“OceanWP obtient la note maximale sur la majoritĂ© des outils de test de la vitesse”, est-il indiquĂ©.

C’est ce que j’ai vĂ©rifiĂ© en lui faisant subir plusieurs tests.

Ci-dessous, votre trouverez mon mode opératoire :

  • Services de test utilisĂ©s : WebPageTest (en utilisant Ă  chaque fois Paris comme localisation) avec prise en compte du critĂšre “fully loaded” (moment oĂč le site est complĂštement chargĂ©, incluant les scripts externes et applications) ; Pingdom Tools (en utilisant Ă  chaque fois Londres comme localisation).
  • Site de test hĂ©bergĂ© sur un serveur mutualisĂ© d’o2switch.
  • Je n’ai activĂ© aucun plugin.
  • J’ai comparĂ© OceanWP Ă  un autre thĂšme gratuit populaire (Sydney, 200 000 installations actives) issu du rĂ©pertoire officiel WordPress.

Test sur WebPageTest avec OceanWP activé : temps de chargement de 1,154s (fully loaded) :

OceanWP sur WebPageTest

Test sur WebPageTest avec Sydney activé : temps de chargement de 2,237s (fully loaded) :

Performance de Sydney sur WebPageTest

Test sur Pingdom Tools avec OceanWP activé : temps de chargement de 629 ms

OceanWP sur Pingdom Tools

Test sur Pingdom Tools avec Sydney activé : temps de chargement de 2,03s :

Performance de Sydney sur Pingdom Tools

Résultat des courses : OceanWP est effectivement à ranger dans la catégorie des thÚmes ultra-rapides.

En revanche, nos tests ont dĂ©montrĂ© qu’il est un peu moins performant que deux de ses concurrents : Astra (1,040s avec WebPageTest) et GeneratePress (0,942s avec WebPageTest).

Attention

Les rĂ©sultats ci-dessus permettent d’avoir un premier aperçu, mais ne peuvent ĂȘtre considĂ©rĂ©s comme un jugement arrĂȘtĂ© et dĂ©finitif. Vous pourriez avoir des donnĂ©es diffĂ©rentes chez vous, en fonction de votre hĂ©bergement, ou encore des plugins que vous utilisez.

Impact sur le référencement

OceanWP a Ă©tĂ© bĂąti en respectant les bonnes pratiques SEO. D’abord, il applique les standards de code de WordPress.

Ensuite, OceanWP utilise des donnĂ©es structurĂ©es Schema.org. Il s’agit d’une mĂ©thode de balisage HTML qui aide Google Ă  comprendre de quel type est votre contenu.

Vous pouvez activer ce schĂ©ma de marquage via le menu Options gĂ©nĂ©rales > RĂ©glages gĂ©nĂ©raux de l’outil de personnalisation.

Schéma de marquage OceanWP

Enfin, n’oubliez pas que vous pouvez agir sur la vitesse de chargement de vos pages, et donc sur votre rĂ©fĂ©rencement, en activant les scripts et les styles de votre choix via le menu Scripts & Styles du Theme Panel.

Note

Si le rĂ©fĂ©rencement vous intĂ©resse et que vous souhaitez creuser le sujet, n’hĂ©sitez pas Ă  vous inscrire Ă  la formation spĂ©ciale de WPMarmite “Enfin visible grĂące au rĂ©fĂ©rencement”.

Gestion du responsive

On dit d’un site web qu’il est responsive lorsqu’il s’adapte sur n’importe quel Ă©cran (ordinateur, smartphone ou tablette).

Vous vous en doutez sĂ»rement un peu, mais si votre site ne s’affiche pas correctement sur smartphone, vous risquez de perdre pas mal de visiteurs en chemin.

Il est donc primordial de soigner cet aspect pour :

  • Favoriser l’expĂ©rience utilisateur.
  • Ne pas plomber votre taux de conversion.
  • Ne pas pĂ©naliser votre rĂ©fĂ©rencement naturel : depuis mars 2018, Google a mis en place l’indexation mobile-first. Cela signifie qu’il utilise principalement la version mobile de votre site pour indexer et positionner vos pages dans ses rĂ©sultats.

Niveau responsive, est-ce qu’OceanWP s’en sort bien ? Un premier test manuel donne une premiĂšre rĂ©ponse positive.

En redimensionnant la fenĂȘtre sur mon navigateur, aucun dĂ©tail choquant ne m’a sautĂ© aux yeux.

Mais pour plus de fiabilitĂ©, je me suis servi du test d’optimisation mobile de Google, qui a donnĂ© satisfaction.

Test du responsive avec l'outil de Google

Quel rapport qualité-prix ?

OceanWP est d’abord disponible gratuitement sur le rĂ©pertoire officiel WordPress. Vous pouvez aussi l’installer directement depuis votre Tableau de bord WordPress.

Si vous voulez bénéficier de plus de fonctionnalités, 2 options sont disponibles :

  • Vous procurer l’une des 13 extensions Premium Ă  l’unitĂ© (9,99$/an).
  • Opter pour l’un des 3 packs Premium (Personal, Business ou Unlimited).
Les prix du thĂšme

Attention

Quelques changements sont Ă  prĂ©voir dans les prochaines semaines au niveau des packs. Nicolas Lecocq l’explique dans cet article. Le pack illimitĂ© (Unlimited) devrait disparaĂźtre pour laisser la place Ă  un pack Agency, utilisable sur 25 sites au maximum.

En dehors du prix – la fourchette va de 39$ (environ 35€) Ă  129$/an (environ 115€) -, la principale diffĂ©rence entre les 3 offres rĂ©side dans la capacitĂ© d’utilisation.
Seule l’offre illimitĂ©e permet, comme son nom l’indique, d’utiliser le thĂšme sur un nombre de sites illimitĂ©.

Si vous optez pour le plan Personal, vous ne pourrez utiliser le contenu du pack que sur 1 site.

Pour le reste, les 3 offres comprennent les mĂȘmes options, Ă  savoir l’accĂšs Ă  12 mois d’assistance (support) et de mises Ă  jour, la prĂ©sence de 13 extensions Premium et de 60 dĂ©mos (templates de sites).

Information

Notez Ă©galement que vous pouvez bĂ©nĂ©ficier d’une Licence Ă  vie afin de pas renouveler chaque annĂ©e – Ă  partir de 159$ (environ 142€) pour 1 site -, et qu’une rĂ©duction de 30% est automatiquement appliquĂ©e si vous reconduisez votre Licence avant son expiration.

Afin de trouver le bon Plan, si je peux me permettre, tout dĂ©pend de vos besoins. Vous gĂ©rez un seul site ? L’offre Personal sera suffisante.

En revanche, si vous crĂ©ez rĂ©guliĂšrement des sites pour des clients, l’offre Unlimited propose un meilleur retour sur investissement, encore plus si vous la payez Ă  vie.

Et par rapport aux solution concurrentes présentes sur le marché, ça donne quoi ?

  • Themeforest : la plupart des thĂšmes vendus sur la plateforme coĂ»tent en moyenne autour de 59$. Ils ne sont pas toujours utilisables sur un nombre de sites illimitĂ© et comprennent 6 mois de support.
  • GeneratePress : il vous coĂ»tera 49,95$ pour une utilisation sur un nombre de sites illimitĂ©s.
  • Astra : les prix du thĂšme crĂ©Ă© par Brainstorm Force dĂ©marrent Ă  partir de 59$ pour une utilisation sur un nombre de sites illimitĂ©s.
  • Genesis : le framework en lui-mĂȘme coĂ»te 59,95$ mais vous devrez obligatoirement vous procurer un thĂšme enfant (soit gĂ©nĂ©ralement un prix de 129,95$ pour les 2). Par contre, le support et les mises Ă  jour sont comprises Ă  vie et vous n’avez pas Ă  renouveler votre thĂšme.

Notre avis final

Points forts d’OceanWP

  • La personnalisation du thĂšme via l’Outil de personnalisation.
  • La foultitude d’options prĂ©sentes, alors que le thĂšme est gratuit de base.
  • OceanWP est rapide et performant, comme annoncĂ©.
  • Un thĂšme respectueux des standards de code de WordPress et SEO friendly.
  • Une documentation riche et claire. Dommage qu’elle soit uniquement accessible en anglais.
  • Le support est plutĂŽt rĂ©actif. C’est en tout cas ce qui est ressorti des recherches que j’ai pu mener.
  • Le thĂšme est rĂ©guliĂšrement mis Ă  jour et correctement maintenu.
  • La compatibilitĂ© avec WooCommerce et les nombreuses options intĂ©grĂ©es nativement Ă  ce sujet.
  • Le thĂšme est trĂšs bien traduit en français (c’est rare), que ce soit sur le Tableau de bord de votre administration, ou sur l’Outil de personnalisation.
  • La Licence Ă  vie pour se procurer le thĂšme une bonne fois pour toutes.
  • L’assistant d’installation est bien fichu pour vous guider pas Ă  pas lors de l’installation du thĂšme.

Axes d’amĂ©lioration d’OceanWP

  • Il y a tellement d’options de personnalisation qu’il n’est pas forcĂ©ment Ă©vident de s’y retrouver au dĂ©part, surtout si vous dĂ©butez sur WordPress.
  • Les tarifs des versions Premium sont plus Ă©levĂ©s que chez deux de ses principaux concurrents : pour une utilisation sur un nombre de sites illimitĂ©, il vous en coĂ»tera 129$/an avec OceanWP, contre 49$/an (environ 44€) pour GeneratePress, et 59$/an (environ 53€) avec Astra.
  • L’extension Ocean Extra me paraĂźt indispensable pour profiter de fonctionnalitĂ©s additionnelles gratuitement (ex : personnaliser chaque type de contenu, activer/dĂ©sactiver les scripts et styles etc.). Dommage qu’elle ne soit pas intĂ©grĂ©e nativement au thĂšme.
  • Plusieurs dĂ©mos de sites nĂ©cessitent l’installation de plugins Premium pour fonctionner correctement. Sinon, vous risquez de vous retrouver avec du contenu en moins, comme expliquĂ© au dĂ©but de cet article.
  • Certains utilisateurs ont aussi remontĂ© le souci suivant, liĂ© au plugin Ocean Demo Import. Une fois une dĂ©mo importĂ©e, il est impossible de la supprimer, sauf en faisant un reset complet de votre base de donnĂ©es.
  • La documentation est uniquement accessible en anglais.

OceanWP, pour qui ?

Comme vous avez pu le lire au début de cet article, Alex ne le conseillerait pas aux débutants en raison de ses nombreuses options au sein desquelles il est facile de se perdre. Un point de vue que je partage, aprÚs ce test.

En revanche, si vous ĂȘtes un utilisateur confirmĂ© et crĂ©ez des sites rĂ©guliĂšrement (*), je pense qu’OceanWP vous sĂ©duira. DĂ©jĂ , il dispose de trĂšs nombreux hooks pour ĂȘtre personnalisĂ©, ce qui le rend flexible et modulable.

Ensuite, pour un thĂšme gratuit, il est quand mĂȘme incroyablement riche en options.

Comme l’a affirmĂ© Nicolas Lecocq en commentaire de la vidĂ©o qu’Alex a consacrĂ© au thĂšme, “au dĂ©but, il faut un petit temps d’adaptation car il y a beaucoup d’options. Je veux laisser beaucoup de choix aux utilisateurs. Une fois le thĂšme pris en main, vous pouvez faire presque tout ce que vous voudrez”.

Enfin, si vous envisagez de créer une boutique WooCommerce, OceanWP sera un parfait compagnon. Vous apprécierez à coup sûr ses nombreuses fonctionnalités natives.

Note

À ce propos, si dĂ©velopper votre activitĂ© de crĂ©ateur de site vous intĂ©resse, WPMarmite propose la formation Devenez un freelance WordPress accompli.

Conclusion

Et voilà, votre plongée dans OceanWP est terminée.

En rĂ©sumĂ©, je suis assez partagĂ© avec ce thĂšme. D’un cĂŽtĂ©, il est vrai qu’il est extrĂȘmement puissant, complet et flexible. C’est un excellent thĂšme, c’est certain.

Mais de l’autre, je le trouve un peu confus, notamment en raison des multiples options qu’il propose. Des options qui permettent quand mĂȘme de pousser la personnalisation trĂšs loin, c’est indĂ©niable et un vrai plus, Ă  condition d’avoir un minimum d’expĂ©rience avec WordPress.

Ayant testĂ© GeneratePress et Astra avant lui, j’avais aussi de quoi Ă©tablir un point de comparaison, Ă©tant donnĂ© que ce sont 3 thĂšmes assez similaires.

RĂ©sultat : j’ai trouvĂ© GeneratePress et Astra plus accessibles pour des dĂ©butants.

Si la version Premium d’OceanWP vous botte, vous pouvez vous la procurer sur le site officiel via le bouton ci-dessous (aff).

Le site officiel d’OceanWP

Maintenant, la parole est Ă  vous.

Utilisez-vous OceanWP ? Avez-vous des remarques Ă  ajouter Ă  notre test ?

Dites-moi tout dans les commentaires.