| Welcome, Guest |
You have to register before you can post on our site.
|
| Online Users |
There are currently 6 online users.
» 0 Member(s) | 5 Guest(s)
Google
|
| Latest Threads |
Test, just a XRumer 23 St...
Forum: Announcements
Last Post: XRumer23lip
09-25-2025, 01:01 AM
» Replies: 0
» Views: 28
|
Comment créer un sous-dom...
Forum: Cpanel
Last Post: XRumer23lip
10-28-2024, 04:29 AM
» Replies: 1
» Views: 1,186
|
Tutorial: Create an Onlin...
Forum: Ellohost
Last Post: mikox
08-03-2024, 07:46 AM
» Replies: 0
» Views: 285
|
Tutoriel : Créer un Site ...
Forum: Ellohost
Last Post: mikox
08-03-2024, 07:45 AM
» Replies: 0
» Views: 313
|
Tutorial: Create a Profes...
Forum: Ellohost
Last Post: mikox
08-03-2024, 07:13 AM
» Replies: 0
» Views: 217
|
Tutoriel : Créer un Site ...
Forum: Ellohost
Last Post: mikox
08-03-2024, 07:12 AM
» Replies: 0
» Views: 250
|
Slither.io - Become the L...
Forum: Others
Last Post: mikox
04-05-2024, 07:30 AM
» Replies: 0
» Views: 307
|
MooMoo.io - Build, Defend...
Forum: Others
Last Post: mikox
04-05-2024, 07:28 AM
» Replies: 0
» Views: 327
|
Smash Karts - The Ultimat...
Forum: Others
Last Post: mikox
04-05-2024, 07:26 AM
» Replies: 0
» Views: 708
|
Dream Chef - A Cooking Ad...
Forum: Others
Last Post: mikox
04-05-2024, 07:24 AM
» Replies: 0
» Views: 303
|
|
|
| How to Fix Destination Folder Already Exists Error in WordPress Via CPanel/Wordpress |
|
Posted by: aaron - 07-18-2023, 08:43 AM - Forum: Cpanel
- No Replies
|
 |
<!DOCTYPE html> <html lang="en"> <head> <title>How to Fix the Installation Failed: Destination Folder Already Exists Error in WordPress</title> </head> <body> <h1>How to Fix the Installation Failed: Destination Folder Already Exists Error in WordPress</h1> <p>“Destination Folder Already Exists” is a common WordPress error that generally occurs during plugin or theme installation. WordPress shows this error message to prevent a destination folder with the same name and path from being overwritten.</p> <p>When a plugin or theme’s installation fails, it leaves behind an empty destination folder. The same happens when an old plugin or theme’s folder isn’t removed properly due to an interruption. This rogue folder stops WordPress from completing the installation.</p> <h2>Fix the Destination Folder Already Exists Error via the WordPress Dashboard</h2> <p>When you install a plugin or a theme manually, WordPress extracts the .zip file in a folder with the same name. If WordPress detects an identical folder with the same path, a comparison between the two will appear.</p> <img src="https://ellohost.com/imageshack/uploads/1689669282_64b64ea23ff2c.jpeg" alt="WordPress Dashboard" width="40%"> <p>In this case, WordPress will ask for permission to overwrite the old plugin or theme folder. Select "Replace current with uploaded" and the “Destination Folder Already Exists” error message should be resolved.</p> <p>Keep in mind that you will only see this warning page if the installation process is done from the WordPress admin area using a plugin or a theme’s .zip file.</p> <h2>Fix Installation Failed: Destination Folder Already Exists via cPanel</h2> <p>If your hosting provider uses cPanel, you can access your WordPress files through its File Manager. The process is similar to that of hPanel’s File Manager.</p> <p>Here’s how to solve the “Destination Folder Already Exists” error using cPanel’s File Manager:</p> <ol> <li>Navigate to File Manager located in the Files section of your cPanel dashboard.</li> <img src="https://ellohost.com/imageshack/uploads/1689669282_64b64ea240047.jpeg" alt="cPanel File Manager" width="40%"> <li>Access the wp-content folder within your root directory (public_html).</li> <img src="https://ellohost.com/imageshack/uploads/1689669282_64b64ea2400e3.jpeg" alt="wp-content folder" width="40%"> <li>Open either the themes or plugins folder and find the folder that’s causing the issue.</li> <img src="https://ellohost.com/imageshack/uploads/1689669282_64b64ea240193.jpeg" alt="themes or plugins folder" width="40%"> <li>Right-click on the folder named after the plugin or theme you want to install and click Delete.</li> <img src="https://ellohost.com/imageshack/uploads/1689669282_64b64ea240213.jpeg" alt="Delete folder" width="40%"> <li>Attempt reinstallation to check whether the error has been resolved.</li> </ol> <h2>Fix Installation Failed: Destination Folder Already Exists via an FTP Client</h2> <p>If your WordPress site is hosted on a VPS server, you can access your website files via an FTP client. After configuring the best FTP client for your needs, follow these steps to solve the “Destination Folder Already Exists” error:</p> <ol> <li>Establish an FTP connection to access the website’s server.</li> <li>Navigate to public_html -> wp-content -> plugins or themes and locate the folder that’s causing the issue.</li> <img src="https://ellohost.com/imageshack/uploads/1689669282_64b64ea240299.jpeg" alt="FTP folder" width="40%"> <li>Right-click on the folder named after the plugin or theme you want to install and click Delete.</li> <img src="https://ellohost.com/imageshack/uploads/1689669282_64b64ea2402ff.jpeg" alt="Delete folder via FTP client" width="40%"> <li>Attempt reinstallation to check whether the error has been resolved.</li> </ol> <br> <br><br> <a href="https://ellohost.com"> <button style="padding: 10px 20px; background-color: blue;">Join ellohost</button> </a></body> </html>
|
|
|
| Comment télécharger un document sur WordPress |
|
Posted by: aaron - 07-18-2023, 08:20 AM - Forum: wordpress
- No Replies
|
|
<!DOCTYPE html> <html lang="fr"> <head> <title>Comment télécharger un document sur WordPress</title> </head> <body> <h1>Comment télécharger un document sur WordPress</h1> <p>Alors que WordPress accepte plusieurs types de fichiers, le format de fichier préféré est le PDF. Cela permet aux utilisateurs de consulter le contenu sans avoir à télécharger le document.</p> <p>Il existe deux méthodes différentes pour ajouter des fichiers dans WordPress - en modifiant une page ou un article ou en les transférant directement dans la bibliothèque multimédia. Selon votre hébergeur WordPress, la taille maximale des fichiers varie de 5 Mo à 500 Mo.</p> <h2>Téléchargement d'un document sur une page ou un article WordPress</h2> <p>Suivez ces instructions pour télécharger un fichier PDF depuis votre ordinateur sur une page ou un article WordPress :</p> <ol> <li>Sur votre tableau de bord WordPress, créez une nouvelle page ou un nouvel article. Vous pouvez également ouvrir un existant.</li> <li>Cliquez sur l'icône + Insérer un bloc pour ouvrir le menu.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734da5.png" width="50%" alt="Icône + Insérer un bloc"> </li> <li>Sous la section Média, choisissez Fichier.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734d49.jpeg" width="50%" alt="Section Média"> </li> <li>Cliquez sur le bouton Téléverser, sélectionnez le document souhaité, puis cliquez sur Ouvrir. Dans cet exemple, nous ajoutons un fichier PDF.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734cce.jpeg" width="50%" alt="Bouton Téléverser"> </li> <li>Un aperçu du document téléversé apparaîtra.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734c64.jpeg" width="50%" alt="Aperçu du document téléversé"> </li> <li>Pour changer le texte d'ancre du fichier, cliquez sur le lien hypertexte à côté du bouton de téléchargement.</li> </ol> <h2>Téléchargement d'un document dans la bibliothèque multimédia WordPress</h2> <p>Voici les étapes pour ajouter des documents à la bibliothèque multimédia WordPress :</p> <ol> <li>Ouvrez le tableau de bord WordPress, allez dans Médias, puis cliquez sur Ajouter un nouveau.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734be7.jpeg" width="50%" alt="Tableau de bord WordPress"> </li> <li>Choisissez Sélectionner des fichiers, sélectionnez les documents à ajouter, puis cliquez sur Ouvrir.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734b7e.jpeg" width="50%" alt="Sélectionner des fichiers"> </li> <li>Revenez au tableau de bord WordPress et créez une nouvelle page ou un nouvel article, ou ouvrez-en un existant.</li> <li>Cliquez sur l'icône + Insérer un bloc.</li> <li>Sous Média, cliquez sur Fichier → Bibliothèque multimédia.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734a85.jpeg" width="50%" alt="Bibliothèque multimédia"> </li> <li>Sélectionnez les documents à insérer, puis cliquez sur Ouvrir. Dans cet exemple, nous téléchargeons un document PDF dans un article WordPress.</li> <li>Dans la section Détails de la pièce jointe, remplissez le titre, la légende et la description, puis cliquez sur Sélectionner.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734616.jpeg" width="50%" alt="Détails de la pièce jointe"> </li> <li>Les liens hypertexte contenant les fichiers téléversés apparaîtront. Cliquez dessus pour modifier le texte d'ancre.</li> </ol> <br> <br><br> <a href="https://ellohost.com"> <button style="padding: 10px 20px; background-color: blue;">Join ellohost</button> </a> </body> </html>
|
|
|
|
| How to Upload a Document in WordPress |
|
Posted by: aaron - 07-18-2023, 08:19 AM - Forum: Wordpress
- No Replies
|
|
<!DOCTYPE html> <html lang="en"> <head> <title>How to Upload a Document in WordPress</title> </head> <body> <h1>How to Upload a Document in WordPress</h1> <p>While WordPress accepts several file types, the preferred file format is PDF. That’s because users can view the content without having to download the document.</p> <p>There are two different methods to add files in WordPress – by editing a page or post or transferring it directly to the Media Library. Depending on your WordPress hosting provider, the maximum file size ranges from 5 MB to 500 MB.</p> <h2>Uploading a Document to a WordPress Page or Post</h2> <p>Follow these instructions to upload a PDF file from your computer to a WordPress page or post:</p> <ol> <li>On your WordPress dashboard, create a new page or post. Alternatively, open an existing one.</li> <li>Click the Block Inserter + icon to open the menu.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734da5.png" width="50%" alt="Block Inserter + icon"> </li> <li>Under the Media section, choose File.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734d49.jpeg" width="50%" alt="Media section"> </li> <li>Click the Upload button, choose the desired document, and click Open. In this example, we’re adding a PDF file.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734cce.jpeg" width="50%" alt="Upload button"> </li> <li>A preview of the uploaded document will appear.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734c64.jpeg" width="50%" alt="Preview of uploaded document"> </li> <li>To change the file’s anchor text, click the hyperlink next to the download button.</li> </ol> <h2>Uploading a Document to the WordPress Media Library</h2> <p>Here are the steps to add documents to your WordPress Media Library:</p> <ol> <li>Open the WordPress Dashboard, go to Media, and click Add New.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734be7.jpeg" width="50%" alt="WordPress Dashboard"> </li> <li>Choose Select Files, select the documents to add, and click Open.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734b7e.jpeg" width="50%" alt="Select Files"> </li> <li>Go back to the WordPress Dashboard, and create a new post or page. Or open an existing one.</li> <li>Click the Block Inserter + icon.</li> <li>Under Media, click the File → Media Library.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734a85.jpeg" width="50%" alt="Media Library"> </li> <li>Select the documents to insert and click Open. For this example, we’re uploading a PDF document to a WordPress post.</li> <li>On the Attachment Details section, fill in the Title, Caption, and Description and click Select.<br> <img src="https://ellohost.com/imageshack/uploads/1689668135_64b64a2734616.jpeg" width="50%" alt="Attachment Details"> </li> <li>The hyperlinks containing the uploaded files will appear. Click them to modify the anchor text.</li> </ol> <br> <br><br> <a href="https://ellohost.com"> <button style="padding: 10px 20px; background-color: blue;">Join ellohost</button> </a> </body> </html>
|
|
|
|
| Comment utiliser wp_enqueue_style pour charger des feuilles de style CSS dans WordPre |
|
Posted by: aaron - 07-18-2023, 05:30 AM - Forum: wordpress
- No Replies
|
|
<!DOCTYPE html> <html> <head> <title>Comment utiliser wp_enqueue_style pour charger des feuilles de style CSS dans WordPress</title> </head> <body> <h1>Comment utiliser wp_enqueue_style pour charger des feuilles de style CSS dans WordPress</h1> <p>Nous allons commencer par quelques exemples de base pour vous aider à mieux comprendre comment fonctionne la fonction <code>wp_enqueue_style()</code>.</p> <hr> <h2>Comment charger la feuille de style principale <code>style.css</code></h2> <p>Pour charger la feuille de style principale du thème <code>style.css</code>, utilisez la fonction <code>wp_enqueue_style()</code> dans le fichier <code>functions.php</code> de votre thème.</p> <img src="https://ellohost.com/imageshack/uploads/1689657531_64b620bb01282.jpeg" width="40%" alt="Exemple de wp_enqueue_style"> <br> <br> function my_theme_enqueue_styles() { <br> wp_enqueue_style('my_theme_style', get_stylesheet_uri()); <br> } <br> add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles'); <br> <p>Dans le code, <code>my-theme-style</code> est un nom unique pour la feuille de style que vous chargez, tandis que la fonction <code>get_stylesheet_uri()</code> gère l'URL du fichier <code>style.css</code> principal du thème.</p> <img src="https://ellohost.com/imageshack/uploads/1689657531_64b620bb0168a.jpeg" width="40%" alt="Exemple de wp_enqueue_style"> <p>Ensuite, la fonction <code>wp_enqueue_style()</code> enregistre la feuille de style et l'ajoute à la file d'attente. Enfin, la fonction <code>add_action()</code> ajoute votre fonction personnalisée <code>my_theme_enqueue_styles()</code> au crochet <code>wp_enqueue_scripts</code>, ce qui garantit que la feuille de style est correctement chargée.</p> <hr> <h2>Comment charger d'autres feuilles de style</h2> <p>Vous pouvez également utiliser la fonction <code>wp_enqueue_style()</code> pour charger des feuilles de style supplémentaires en plus de la feuille de style principale. Par exemple, ajoutez des options de style supplémentaires dans un fichier séparé.</p> <br> <br> function my_theme_enqueue_styles() { <br> wp_enqueue_style('my-theme-style', get_stylesheet_uri()); <br> wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css')); <br> } <br> add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles'); <br> <p>Dans cette méthode, nous avons utilisé la fonction <code>get_theme_file_uri()</code>, qui renvoie l'URL du fichier dans le répertoire du thème actuel. Dans notre cas, il s'agit de <code>extra.css</code>. Ainsi, la fonction chargera d'abord la feuille de style principale, puis les styles supplémentaires.</p> <hr> <h2>Comment charger des feuilles de style externes dans WordPress</h2> <p>Il est possible d'utiliser la fonction <code>wp_enqueue_style()</code> pour charger une feuille de style à partir d'une source externe. Ce processus peut être bénéfique si vous souhaitez utiliser des polices personnalisées ou une feuille de style hébergée sur un réseau de diffusion de contenu (CDN).</p> <br> <br> function theme_files() { <br> wp_enqueue_style('theme_custom', 'INSÉRER URL'); <br> } <br> add_action('wp_enqueue_scripts', 'theme_files'); <br> <p>N'oubliez pas de remplacer la partie <code>INSÉRER URL</code> par une véritable URL de feuille de style.</p> <hr> <h2>Comment ajouter des fichiers de script à WordPress en utilisant <code>wp_enqueue_script</code></h2> <p>WordPress dispose d'une fonction intégrée appelée <code>wp_enqueue_script()</code> qui vous permet de charger des scripts JavaScript ou similaires. Ajoutez le code suivant dans le fichier <code>functions.php</code> de votre thème :</p> <br> <br> function theme_scripts() { <br> wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array(), '1.0', true); <br> } <br> add_action('wp_enqueue_scripts', 'theme_scripts'); <br> <p>Notez que cette fonction utilise plusieurs paramètres :</p> <ul> <li><code>my-script</code> - le nom de votre script. Vous pouvez choisir n'importe quel nom.</li> <li><code>/js/my-script.js</code> - l'emplacement de votre script. Dans ce cas, il se trouve dans le répertoire <code>js</code> du thème WordPress.</li> <li><code>array()</code> - définit les dépendances que votre script peut avoir.</li> <li><code>1.0</code> - le numéro de version du script.</li> <li><code>true</code> - détermine si le script doit être chargé dans le pied de page.</li> </ul> <hr> <!-- D'autres exemples sont inclus ici --> <hr> <h2>Charger du CSS uniquement sur des pages spécifiques</h2> <p>Charger du CSS uniquement sur des pages spécifiques peut offrir plusieurs avantages pour un site WordPress :</p> <ul> <li><strong>Temps de chargement de la page plus rapide</strong> - en chargeant du CSS uniquement sur les pages où il est nécessaire, vous évitez d'avoir du code inutile. Cela améliorera la vitesse globale de votre site.</li> <li><strong>Maintenance plus facile</strong> - vous pouvez modifier les fichiers CSS sans affecter les autres pages.</li> </ul> <br> <br> <?php add_action('init', 'register_custom_styles'); <br> function register_custom_styles() { <br> wp_register_style('custom-design', '/wp-content/design.css'); <br> } <br> add_action('wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts'); <br> function conditionally_enqueue_styles_scripts() { <br> if (is_page('contactus')) { <br> wp_enqueue_style('custom-design'); <br> } <br> } <br> ?> <br> <h2>Charger du CSS dans le pied de page</h2> <p>En déplaçant le CSS vers le bas de la page, le navigateur peut prioriser le chargement du HTML et d'autres ressources importantes en premier. Ainsi, le chargement du CSS dans le pied de page améliore le temps de chargement de la page.</p> <br> <br> <?php function footer_style() { <br> wp_enqueue_style('custom-design', '/wp-content/design.css'); <br> }; <br> add_action('get_footer', 'footer_style'); <br> ?> <br> <p>Veillez à ce que le chargement du CSS dans le pied de page ne provoque pas de problèmes de rendu et ne rende pas la page mal affichée ou sans style. Pour cette raison, chargez d'abord le CSS le plus important dans la partie de l'en-tête, puis passez à la partie du pied de page.</p> <h2>Ajouter des styles internes dynamiques</h2> <p>Les styles internes dynamiques vous permettent d'ajouter des styles personnalisés à des éléments individuels d'une page web. Le moyen le plus simple d'ajouter des styles internes est d'utiliser la fonction <code>wp_add_inline_style()</code>, qui les charge après un fichier CSS spécifique.</p> <br> <br> <?php function theme_style() { <br> wp_enqueue_style('custom-style', get_template_directory_uri() . '/wp-content/design.css'); <br> $bold_headlines = get_theme_mod('headline-font-weight'); <br> $inline_style = '.headline { font-weight: ' . $bold_headlines . '; }'; <br> wp_add_inline_style('custom-style', $inline_style); <br> } <br> add_action('wp_enqueue_scripts', 'theme_style'); <br> ?> <br> <p>Notez que le style interne fonctionnera uniquement après que <code>design.css</code> ait été correctement chargé.</p> <h2>Vérification du statut de l'enregistrement de la feuille de style</h2> <p>Utilisez la fonction <code>wp_style_is()</code> si vous souhaitez obtenir plus d'informations sur l'état de la feuille de style. Cette fonction permet de vérifier si un fichier de feuille de style CSS est dans la file d'attente, chargé, enregistré ou prêt à être affiché.</p> <br> <br> <?php function check_styles() { <br> if (wp_style_is('main')) { <br> wp_enqueue_style('my-theme', '/custom-theme.css'); <br> } <br> } <br> add_action('wp_enqueue_scripts', 'check_styles'); <br> ?> <br> <h2>Insertion de métadonnées dans la feuille de style</h2> <p>Vous pouvez également utiliser la fonction <code>wp_enqueue_style()</code> avec le code suivant pour ajouter des métadonnées de titre à une feuille de style CSS :</p> <br> <br> <?php function theme_extra_styles() { <br> wp_enqueue_style('add-metadata', '/wp-content/design.css'); <br> wp_style_add_data('add-metadata', 'title', 'Mon super titre'); <br> } <br> add_action('wp_enqueue_scripts', 'theme_extra_styles'); <br> ?> <br> <p>Dans cet exemple, nous avons utilisé la fonction <code>wp_style_add_data()</code> et ajouté un titre à la feuille de style CSS.</p> <h2>Désenregistrement des fichiers de style</h2> <p>Il est important de désenregistrer les fichiers de style CSS que vous n'utilisez plus. Lorsque plusieurs plugins ou thèmes inscrivent le même fichier de style, cela peut entraîner des conflits et des problèmes sur le site web.</p> <?php add_action('wp_enqueue_scripts', 'remove_default_stylesheet', 20); ?> <br> function remove_default_stylesheet() { <br> wp_dequeue_style('original-enqueue-stylesheet-handle'); <br> wp_deregister_style('original-register-stylesheet-handle'); <br> wp_register_style('new-style', get_stylesheet_directory_uri() . '/new.css', false, '1.0.0'); <br> wp_enqueue_style('new-style'); <br> } <br> ?> <br> <br> <br> <a href="https://ellohost.com"> <button style="padding: 10px 20px; background-color: blue;">Join ellohost</button> </a> </body> </html>
|
|
|
|
| How to Use wp_enqueue_style to Load CSS Stylesheets to WordPress |
|
Posted by: aaron - 07-18-2023, 05:25 AM - Forum: Wordpress
- No Replies
|
|
<!DOCTYPE html> <html> <head> <title>How to Use wp_enqueue_style to Load CSS Stylesheets to WordPress</title> </head> <body> <h1>How to Use wp_enqueue_style to Load CSS Stylesheets to WordPress</h1> <p>We’ll start with a few basic examples to help you better understand how the <code>wp_enqueue_style()</code> function works.</p> <hr> <h2>How to Enqueue Main <code>style.css</code> Stylesheet</h2> <p>To enqueue the main theme <code>style.css</code> stylesheet, use the <code>wp_enqueue_style()</code> function in your theme’s <code>functions.php</code> file.</p> <img src="https://ellohost.com/imageshack/uploads/1689657531_64b620bb01282.jpeg" width="40%" alt="Example of wp_enqueue_style"> <br> function my_theme_enqueue_styles() { <br> wp_enqueue_style('my_theme_style', get_stylesheet_uri()); <br> } <br> add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles'); <br> <p>In the code, <code>my-theme-style</code> is a unique name for the stylesheet you are enqueueing, while the <code>get_stylesheet_uri()</code> function handles the URL of the main theme’s <code>style.css</code> file.</p> <img src="https://ellohost.com/imageshack/uploads/1689657531_64b620bb0168a.jpeg" width="40%" alt="Example of wp_enqueue_style"> <p>Next, the <code>wp_enqueue_style()</code> function registers the style and adds it to the queue. Finally, the <code>add_action()</code> function adds your custom <code>my_theme_enqueue_styles()</code> function to the <code>wp_enqueue_scripts</code> hook, which will ensure that the stylesheet is enqueued properly.</p> <hr> <h2>How to Enqueue Other Stylesheets</h2> <p>You can also use the <code>wp_enqueue_style()</code> function to enqueue additional styles on top of the main stylesheet. For example, add extra styling options in a separate file.</p> <br> function my_theme_enqueue_styles() { <br> wp_enqueue_style('my-theme-style', get_stylesheet_uri()); <br> wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css')); <br> } <br> add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles'); <br> <p>In this method, we’ve used the <code>get_theme_file_uri()</code> function, which returns the file’s URL in the current theme’s directory. In our case, it’s <code>extra.css</code>. This way, the function will enqueue the main stylesheet first and then move to the additional styles.</p> <hr> <h2>How to Load External Stylesheets to WordPress</h2> <p>It’s possible to use the <code>wp_enqueue_style()</code> function to enqueue a stylesheet from an external source. The process can be beneficial if you want to use custom fonts or a stylesheet hosted on a content delivery network (CDN).</p> <br> function theme_files() { <br> wp_enqueue_style('theme_custom', 'INSERT URL'); <br> } <br> <br> add_action('wp_enqueue_scripts', 'theme_files'); <br> <p>Remember to replace the <code>INSERT URL</code> part with an actual stylesheet URL.</p> <hr> <h2>How to Add Script Files to WordPress Using <code>wp_enqueue_script</code></h2> <p>WordPress has a built-in function called <code>wp_enqueue_script()</code> that enables you to enqueue JavaScript or similar scripts. Add the following code to your theme’s <code>functions.php</code> file:</p> <br> function theme_scripts() { <br> wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array(), '1.0', true); <br> } <br> add_action('wp_enqueue_scripts', 'theme_scripts'); <br> <p>Note that this function uses more parameters:</p> <ul> <li><code>my-script</code> – the name of your script. You can choose any name you want.</li> <li><code>/js/my-script.js</code> – location of your script. In this case, it’s in the <code>js</code> directory of the WordPress theme.</li> <li><code>array()</code> – defines dependencies your script may have.</li> <li><code>1.0</code> – the script version number.</li> <li><code>true</code> – determines whether to load the script in the footer.</li> </ul> <hr> <h2>Useful Examples of <code>wp_enqueue_style</code></h2> <p>Check out a few practical use cases of the <code>wp_enqueue_style()</code> function to improve your WordPress site.</p> <!-- Other examples are included here --> <hr> <h2>Loading CSS Only on Specific Pages</h2> <p>Loading CSS on specific pages can provide several benefits for a WordPress website:</p> <ul> <li><strong>Faster page load times</strong> – when you load CSS only on the pages where it is necessary, you avoid having unnecessary code. This will improve your overall site’s speed.</li> <li><strong>Easier maintenance</strong> – you can change CSS files without affecting other pages.</li> </ul> <br> <?php <br> add_action('init', 'register_custom_styles'); <br> function register_custom_styles() { <br> wp_register_style('custom-design', '/wp-content/design.css'); <br> } <br> add_action('wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts'); <br> function conditionally_enqueue_styles_scripts() { <br> if (is_page('contactus')) { <br> wp_enqueue_style('custom-design'); <br> } <br> } <br> ?> <br> <h2>Loading CSS File in the Footer</h2> <p>By moving CSS to the bottom of the page, the browser can prioritize loading the HTML and other important resources first. As a result, loading CSS in the footer improves your page load time.</p> <br> <?php <br> function footer_style() { <br> wp_enqueue_style('custom-design', '/wp-content/design.css'); <br> }; <br> add_action('get_footer', 'footer_style'); <br> ?> <br> <p>Remember that loading CSS in the footer can cause rendering issues and make the page look broken or unstyled. For this reason, load the most important CSS in the head section first, then move to the footer part.</p> <h2>Adding Dynamic Inline Styles</h2> <p>Dynamic inline styles allow you to add custom styles to individual elements on a web page. The easiest way to add inline styles is with the <code>wp_add_inline_style()</code> function, which loads them after a specific CSS file.</p> <br> <?php <br> function theme_style() { <br> wp_enqueue_style('custom-style', get_template_directory_uri() . '/wp-content/design.css'); <br> $bold_headlines = get_theme_mod('headline-font-weight'); <br> $inline_style = '.headline { font-weight: ' . $bold_headlines . '; }'; <br> wp_add_inline_style('custom-style', $inline_style); <br> } <br> add_action('wp_enqueue_scripts', 'theme_style'); <br> ?> <br> <p>Keep in mind that inline style will only work after the <code>design.css</code> is properly enqueued.</p> <h2>Checking the Stylesheet’s Enqueue Status</h2> <p>Use the <code>wp_style_is()</code> function if you want more information about the stylesheet state. This function can check whether a CSS stylesheet file is in the queue, enqueued, registered, or ready to be displayed.</p> <br> <?php <br> function check_styles() { <br> if (wp_style_is('main')) { <br> wp_enqueue_style('my-theme', '/custom-theme.css'); <br> } <br> } <br> add_action('wp_enqueue_scripts', 'check_styles'); <br> ?> <br> <h2>Inserting Metadata into the Stylesheet</h2> <p>You can also use the <code>wp_enqueue_style()</code> function with the following code snippet to enqueue a CSS stylesheet with title metadata:</p> <br> <?php <br> function theme_extra_styles() { <br> wp_enqueue_style('add-metadata', '/wp-content/design.css'); <br> wp_style_add_data('add-metadata', 'title', 'My Awesome Title'); <br> } <br> add_action('wp_enqueue_scripts', 'theme_extra_styles'); <br> ?> <br> <p>In this example, we’ve used the <code>wp_style_add_data()</code> function and added a title to the CSS stylesheet.</p> <h2>Deregistering Style Files</h2> <p>It’s important to deregister CSS-style files you no longer use. When multiple plugins or themes enqueue the same style file, it can lead to conflicts and issues on the website.</p> <?php add_action('wp_enqueue_scripts', 'remove_default_stylesheet', 20);<br> function remove_default_stylesheet() { <br> wp_dequeue_style('original-enqueue-stylesheet-handle'); <br> wp_deregister_style('original-register-stylesheet-handle'); <br> <br> wp_register_style('new-style', get_stylesheet_directory_uri() . '/new.css', false, '1.0.0'); <br> wp_enqueue_style('new-style'); <br> } <br> ?> <br> <br><br> <a href="https://ellohost.com"> <button style="padding: 10px 20px; background-color: blue;">Join ellohost</button> </a> </body> </html>
|
|
|
|
| Comment intégrer un flux Instagram dans WordPress |
|
Posted by: aaron - 07-18-2023, 05:14 AM - Forum: wordpress
- No Replies
|
|
<!DOCTYPE html> <html> <head> <title>Comment intégrer un flux Instagram dans WordPress</title> </head> <body> <h1>Comment intégrer un flux Instagram dans WordPress</h1> <p>Suivez ce tutoriel étape par étape pour intégrer des publications Instagram sur votre site Web WordPress :</p> <h2>1. Créez un compte Instagram</h2> <p>Vous pouvez créer un profil Instagram personnel ou professionnel via le site Web officiel, l'application mobile ou Facebook.</p> <p>Suivez ces étapes pour vous inscrire via le site Web officiel d'Instagram :</p> <ol> <li>Accédez au site Web officiel d'Instagram et cliquez sur S'inscrire.</li> <li>Entrez vos coordonnées personnelles, y compris votre numéro de téléphone portable ou votre adresse e-mail, votre nom complet, votre nom d'utilisateur et votre mot de passe. Une fois terminé, sélectionnez S'inscrire.</li> <li>Ajoutez votre date de naissance en cliquant sur la flèche vers le bas et en choisissant le mois, la date et l'année. Sélectionnez Suivant pour continuer.</li> </ol> <p>Vous devez fournir votre date de naissance correcte, même pour un compte Instagram professionnel. Instagram vise à offrir une expérience appropriée en fonction de l'âge à chaque utilisateur.</p> <p>L'application Instagram est disponible sur l'App Store pour les appareils iOS et sur Google Play Store pour les téléphones Android. Voici comment créer un profil Instagram professionnel ou personnel sur un iPhone :</p> <ol> <li>Après avoir téléchargé l'application, appuyez sur l'icône Instagram pour l'ouvrir.</li> <li>Sélectionnez Créer un nouveau compte et entrez votre numéro de téléphone portable ou votre adresse e-mail. Une fois terminé, appuyez sur Suivant.</li> <li>Entrez le code de confirmation envoyé à votre contact, le nouveau mot de passe, vos informations de date de naissance, votre nom et votre nom d'utilisateur. Appuyez sur Suivant.</li> <li>Consultez les conditions et la politique de confidentialité d'Instagram et sélectionnez J'accepte pour déclarer votre conformité à ses règles.</li> <li>Ajoutez une photo de profil et appuyez sur Suivant. Si vous préférez l'ajouter ultérieurement, sélectionnez Ignorer.</li> <li>Pour faire de votre photo de profil votre première publication, activez le commutateur et choisissez Terminé.</li> </ol> <p>Vous pouvez également utiliser un compte Facebook existant pour créer un profil Instagram. Voici comment synchroniser votre profil Facebook avec Instagram :</p> <ol> <li>Ouvrez l'application Instagram et sélectionnez S'inscrire.</li> <li>Si vous êtes connecté à votre compte Facebook sur votre téléphone, votre profil apparaîtra. Choisissez Continuer en tant que [Votre nom].</li> <li>L'application vous invitera à vous connecter à votre compte Facebook. Appuyez sur Se connecter.</li> <li>Lisez les conditions et la politique de confidentialité d'Instagram et sélectionnez J'accepte.</li> </ol> <h2>2. Choisissez un plugin d'alimentation Instagram pour WordPress</h2> <p>Vous devez installer un plugin WordPress pour intégrer un flux Instagram sur votre site Web. Voici deux de nos recommandations :</p> <h3>Smash Balloon</h3> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b6199624cb0.jpeg" width="40%"></p> <p>Smash Balloon est l'un des meilleurs plugins WordPress pour Instagram. Il vous permet d'afficher des publications à partir de plusieurs comptes Instagram sur un seul flux ou des flux séparés.</p> <p>La personnalisation d'un flux Instagram sur WordPress avec Smash Balloon est facile. Vous pouvez modifier la largeur, la hauteur, la couleur de fond, la taille des images et les colonnes.</p> <p>En plus de la version gratuite, ce plugin WordPress propose :</p> <ul> <li>Des miniatures de toutes tailles pour mettre en valeur vos publications Instagram.</li> <li>Le bouton "Charger plus" pour afficher d'autres photos Instagram à partir de votre compte.</li> <li>L'option "Suivre sur Instagram" permet aux visiteurs de suivre facilement votre compte sans avoir à le rechercher manuellement dans l'application mobile.</li> <li>La fonction JavaScript et CSS personnalisée permet aux développeurs web de modifier l'apparence et le style du flux Instagram.</li> <li>L'option de tri de vos images Instagram par ordre chronologique ou aléatoire.</li> </ul> <p>En plus de la version gratuite, Smash Balloon propose le plugin Instagram Feed Pro. Il commence à 49 $ par an et offre des fonctionnalités avancées, telles que l'affichage des flux marqués et des hashtags.</p> <h3>Social Feed Gallery</h3> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b6199624dc8.jpeg" width="40%"></p> <p>Social Feed Gallery est un plugin WordPress convivial pour les flux Instagram qui offre une configuration en un clic pour simplifier le processus d'intégration. Il vous permet également d'organiser les flux Instagram en fonction du nom d'utilisateur et du hashtag.</p> <p>Voici d'autres fonctionnalités offertes par ce plugin :</p> <ul> <li>Affichez les flux Instagram sur votre site Web WordPress à l'aide de deux options de mise en page - galerie ou carrousel.</li> <li>Un mécanisme de mise en cache de sauvegarde pour assurer la disponibilité de vos flux même en cas de problème avec l'API Instagram.</li> <li>Utilisez une galerie contextuelle pour afficher les vidéos et images Instagram de votre flux afin d'améliorer son apparence.</li> <li>Mise en cache automatique du contenu Instagram pour optimiser les performances du serveur et accélérer le chargement des pages.</li> </ul> <p>La version gratuite offre les fonctionnalités nécessaires pour intégrer des flux Instagram sur votre site WordPress. Pour bénéficier de fonctionnalités supplémentaires telles que les mises à jour à vie et le support pendant 6 mois, optez pour le plan premium à partir de 49 $ par licence.</p> <h2>3. Connectez le compte Instagram à WordPress</h2> <p>Une fois que vous avez choisi et activé le plugin, voici comment connecter votre compte Instagram à WordPress. Dans cet exemple, nous utilisons la version gratuite du plugin Smash Balloon :</p> <ol> <li>Ouvrez l'option Instagram Feed sur votre tableau de bord WordPress et cliquez sur Ajouter un nouveau.</li> </ol> <ol start="2"> <li>Choisissez le type de flux Instagram. La version gratuite ne propose que le flux de chronologie utilisateur, tandis que la version Pro propose trois options avancées - Public Hashtag, Tagged Posts et Social Wall. Sélectionnez Suivant pour continuer.</li> </ol> <ol start="3"> <li>Cliquez sur Ajouter une source pour connecter Instagram à votre site Web. Vous serez redirigé vers le site Web de Smash Balloon.</li> </ol> <ol start="4"> <li>Choisissez le type de compte - Personnel, Professionnel ou Je ne suis pas sûr. Dans cet exemple, nous connectons un compte Instagram personnel.</li> <li>Sélectionnez le bouton Se connecter avec Instagram. Avec la version Premium, vous pourrez ajouter le compte manuellement car vous disposerez d'un jeton d'accès à l'API Instagram.</li> </ol> <ol start="6"> <li>Entrez vos identifiants Instagram et cliquez sur Se connecter.</li> <li>Examinez les demandes d'accès et cliquez sur Autoriser.</li> <li>Enfin, confirmez votre domaine en cliquant sur Oui, c'est mon domaine.</li> </ol> <p>Avec le plugin Instagram Feed Pro, vous pouvez ajouter plusieurs flux Instagram à votre site WordPress. Suivez ces étapes pour le faire :</p> <ol> <li>Accédez au tableau de bord Smash Balloon et choisissez le profil et la conception du flux.</li> <li>Sélectionnez Intégrer et copiez le code court (shortcode).</li> <li>Collez le code court dans le bloc Instagram Feed de l'éditeur WordPress.</li> </ol> <h2>4. Configurez le flux Instagram</h2> <p>Après avoir connecté votre profil Instagram à WordPress, il est temps de créer la mise en page de votre flux Instagram :</p> <ol> <li>Sélectionnez votre nom d'utilisateur Instagram sur le tableau de bord de Smash Balloon et choisissez Suivant.</li> <li>Cliquez sur le bouton Oui, allons-y pour créer une photo de profil ou une bio personnalisée.</li> <li>Téléchargez une photo de profil, insérez votre bio et choisissez Ajouter.</li> <li>Une fois redirigé vers l'éditeur, vous pouvez ajuster l'apparence du flux. Sélectionnez Mise en page du flux pour changer la conception, la hauteur et le padding. Vous pouvez également définir le nombre de publications Instagram et les colonnes.</li> </ol> <ol start="5"> <li>Choisissez le schéma de couleur pour modifier la teinte de fond.</li> </ol> <ol start="6"> <li>Cliquez sur l'en-tête pour ajuster le style de l'en-tête.</li> </ol> <ol start="7"> <li>Sélectionnez Publications → Images et vidéos pour définir la résolution optimale de votre contenu Instagram.</li> </ol> <ol start="8"> <li>Cliquez sur le bouton "Charger plus" pour ajuster l'option de chargement supplémentaire.</li> </ol> <ol start="9"> <li>Sélectionnez le bouton "Suivre" pour modifier l'option de suivi.</li> </ol> <ol start="10"> <li>Ouvrez Paramètres → Sources pour basculer entre différents utilisateurs Instagram.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b6199625416.jpeg" width="40%"></p> <ol start="11"> <li>Allez dans Paramètres → Filtres et Modération pour appliquer des configurations particulières à des contenus Instagram spécifiques.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b6199625483.jpeg" width="40%"></p> <ol start="12"> <li>Cliquez sur Paramètres → Tri pour organiser votre flux. Par exemple, affichez les dernières publications Instagram en premier en choisissant Nouveauté.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b61996254e2.jpeg" width="40%"></p> <ol start="13"> <li>Choisissez Avancé pour modifier le nombre maximal de requêtes API simultanées et activer des modèles personnalisés.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b6199625545.jpeg" width="40%"></p> <ol start="14"> <li>Une fois que vous avez terminé de modifier votre flux Instagram, cliquez sur Enregistrer.</li> </ol> <h2>5. Intégrez le flux Instagram dans WordPress</h2> <p>Maintenant que vous avez conçu l'apparence, il est temps d'intégrer les flux Instagram sur votre site Web. Pour ce faire, ouvrez un article WordPress → icône d'ajout de bloc + → Flux Instagram.</p> <p>Alternativement, allez dans le constructeur de flux de Smash Balloon → Intégrer → Ajouter à une page pour intégrer votre flux Instagram sur une page WordPress,</p> <p>Cependant, les étapes ci-dessus ne fonctionnent que si vous n'avez qu'une seule conception. Si vous avez plusieurs modèles, voici comment ajouter un flux Instagram spécifique sur votre site WordPress :</p> <ol> <li>Ouvrez le constructeur de flux de Smash Balloon et cliquez sur Intégrer.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b61996255c9.jpeg" width="40%"></p> <ol start="2"> <li>Dupliquez le code court (shortcode) dans la fenêtre contextuelle en sélectionnant le bouton Copier.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b619962565f.jpeg" width="40%"></p> <ol start="3"> <li>Allez dans le tableau de bord WordPress → ouvrez Articles ou Pages → choisissez le bloc Flux Instagram → Bloc → collez le code.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b61996256d8.jpeg" width="40%"></p> <p>Alternativement, modifiez le code court en ajoutant le numéro de conception dans le champ Paramètres du code court (Shortcode Settings) et cliquez sur Appliquer les modifications. Cela intégrera automatiquement le modèle choisi. Par exemple, nous allons utiliser feed=”2″.</p> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b619962573e.jpeg" width="40%"></p> <ol start="4"> <li>Le bloc affichera maintenant la publication Instagram intégrée. Cliquez sur Publier pour l'appliquer sur votre site Web.</li> </ol> <p>Si votre thème ne prend pas en charge l'édition complète du site, intégrez un flux Instagram sur votre site WordPress à l'aide de widgets. Ouvrez le constructeur de flux de Smash Balloon → Intégrer → Ajouter à un widget.</p> <p>Alternativement, ajoutez le widget Flux Instagram en allant dans le tableau de bord WordPress → Apparence → Widgets → Insertion de widget + → Flux Instagram. Faites glisser le widget vers n'importe quelle zone de votre site WordPress, comme la barre latérale principale ou l'en-tête.</p> <p>Pour afficher un flux Instagram différent, entrez le code court (shortcode) du modèle via Paramètres du code court (Shortcode Settings) → Appliquer les modifications → Mettre à jour.</p> <br><br> <a href="https://ellohost.com"> <button style="padding: 10px 20px; background-color: blue;">Join ellohost</button> </a> </body> </html>
|
|
|
|
| How to Embed an Instagram Feed to WordPress |
|
Posted by: aaron - 07-18-2023, 05:04 AM - Forum: Wordpress
- No Replies
|
|
<!DOCTYPE html> <html> <head> <title>How to Embed an Instagram Feed to WordPress</title> </head> <body> <h1>How to Embed an Instagram Feed to WordPress</h1> <p>Follow this step-by-step tutorial to embed Instagram posts on your WordPress website:</p> <h2>1. Create an Instagram Account</h2> <p>You can create a personal or business Instagram profile via the official website, mobile app, or Facebook.</p> <p>Follow these steps to sign up through the official Instagram website:</p> <ol> <li>Go to Instagram’s official website and click Sign up.</li> <li>Enter your personal details, including your mobile phone number or email address, full name, username, and password. Once done, select Sign up.</li> <li>Add your birthday information by clicking the down arrow and choosing the month, date, and year. Select Next to proceed.</li> </ol> <p>You must provide your correct birthday information, even for a business Instagram account. Instagram aims to give an age-appropriate experience to each user.</p> <p>Instagram will send you a confirmation code via email or phone. Copy and paste the information code in the field and click Next until you successfully create an Instagram account.</p> <p>The Instagram app is available on the App Store for iOS devices and Google Play Store for Android phones. Here’s how to create a business or personal Instagram profile on an iPhone:</p> <ol> <li>After downloading the app, tap the Instagram icon to open it.</li> <li>Select Create New Account and enter your phone number or email address. Once done, tap Next.</li> <li>Enter the confirmation code sent to your contact, the new password, your birthday information, and your name and username. Tap Next.</li> <li>Review Instagram’s terms and data policy. Select I agree to declare your compliance with its rules.</li> <li>Upload a profile picture and tap Next. If you want to add it later, select Skip.</li> <li>To make your profile picture your first post, toggle the switch and choose Done.</li> </ol> <p>Alternatively, use an existing Facebook account to create an Instagram profile. Here’s how to sync your Facebook profile to Instagram:</p> <ol> <li>Open the Instagram application and select Sign Up.</li> <li>If you are logged in to your Facebook account on your phone, your profile will appear. Choose Continue as [Your Name].</li> <li>The app will prompt you to log in to your Facebook account. Tap Log in.</li> <li>Read Instagram’s terms and privacy policy and select I agree.</li> </ol> <h2>2. Choose an Instagram Feed Plugin for WordPress</h2> <p>You need to install a WordPress plugin to embed an Instagram feed on your website. Here are two of our recommendations:</p> <h3>Smash Balloon</h3> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b6199624cb0.jpeg" width="40%"></p> <p>Smash Balloon is one of the best WordPress Instagram plugins. It lets you display posts from multiple Instagram accounts on one or separate feeds.</p> <p>Customizing an Instagram feed on WordPress with Smash Balloon is easy. You can modify the width, height, background color, picture size, and columns.</p> <p>On top of that, this WordPress plugin offers:</p> <ul> <li>Thumbnails in any size to highlight your Instagram posts.</li> <li>The Load More button to show other Instagram photos from your account.</li> <li>The Follow on Instagram option lets visitors easily follow your account without manually searching for it on the mobile application.</li> <li>The custom JavaScript and CSS feature allows web developers to modify the Instagram feed’s appearance and style.</li> <li>The option to arrange your Instagram images in chronological or random order.</li> </ul> <p>Aside from the free version, Smash Balloon offers the Instagram Feed Pro plugin. It starts at $49/year and includes advanced capabilities, such as displaying tagged and hashtag feeds.</p> <h3>Social Feed Gallery</h3> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b6199624dc8.jpeg" width="40%"></p> <p>Social Feed Gallery is a user-friendly Instagram feed WordPress plugin that offers a one-click setup to simplify the integration process. It also lets you arrange Instagram feeds according to the username and hashtag.</p> <p>Here are other features this plugin offers:</p> <ul> <li>Display Instagram feeds on your WordPress site using two layout options – gallery or carousel.</li> <li>A backup caching mechanism to ensure your feeds are available even when Instagram’s API encounters issues.</li> <li>Use a pop-up gallery to display Instagram videos and images from your feed to improve its appearance.</li> <li>Automatically cache Instagram content to optimize server performance and speed up page loading times.</li> </ul> <p>The free edition has the necessary features to embed Instagram feeds on your WordPress website. To enjoy more capabilities like lifetime updates and 6-month support, purchase the premium plan starting at $49/license.</p> <h2>3. Connect the Instagram Account to WordPress</h2> <p>Once you’ve chosen and activated the plugin, here’s how to connect your Instagram account to WordPress. In this example, we’re using the free version of the Smash Balloon plugin:</p> <ol> <li>Open the Instagram Feed option on your WordPress dashboard and click Add New.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b6199624ee3.jpeg" width="40%"></p> <ol start="2"> <li>Choose the Instagram feed type. The free version only provides User Timeline, while the Pro offers three advanced options – Public Hashtag, Tagged Posts, and Social Wall. Select Next to proceed.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b6199624f5b.jpeg" width="40%"></p> <ol start="3"> <li>Click Add Source to connect Instagram to your website. There, you’ll get redirected to Smash Balloon’s website.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b6199624fee.jpeg" width="40%"></p> <ol start="4"> <li>Choose the account type – Personal, Business, or I’m not sure. For this example, we’re connecting a personal Instagram account.</li> <li>Select the Login with Instagram button. With the Premium version, you can add the account manually since you’ll have an Instagram API access token.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b6199625064.jpeg" width="40%"></p> <ol start="6"> <li>Enter your Instagram credentials and click Log in.</li> <li>Review the access requests and click Allow.</li> <li>Lastly, confirm your domain by clicking Yes, it is my domain.</li> </ol> <p>With the Instagram Feed Pro plugin, you can add multiple Instagram feeds to your WordPress site. Follow these steps to do it:</p> <ol> <li>Go to the Smash Balloon dashboard and choose the profile and feed design.</li> <li>Select Embed and copy the shortcode.</li> <li>Paste the embed code to Instagram Feed on the WordPress editor.</li> </ol> <h2>4. Configure the Instagram Feed</h2> <p>After connecting your Instagram profile to WordPress, it’s time to create your Instagram feed layout:</p> <ol> <li>Select your Instagram handle on Smash Balloon’s dashboard and choose Next.</li> <li>Click the Yes, let’s do it button to create a custom profile picture or bio.</li> <li>Upload a profile picture, insert your bio, and choose Add.</li> <li>Once you’re redirected to the builder, you can adjust the feed’s appearance. Select Feed Layout to change the design, height, and padding. You can also set the number of Instagram posts and columns.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b61996250d9.webp" width="40%"></p> <ol start="5"> <li>Choose Color Scheme to modify the background shade.</li> </ol> <ol start="6"> <li>Click Header to adjust the header’s style.</li> </ol> <ol start="7"> <li>Select Posts → Images and Videos to set the optimal resolution for your Instagram content.</li> </ol> <ol start="8"> <li>Click Load More Button to adjust the load more option.</li> </ol> <ol start="9"> <li>Select Follow Button to modify the following option.</li> </ol> <ol start="10"> <li>Open Settings → Sources to switch between different Instagram users.</li> </ol> <ol start="11"> <li>Go to Settings → Filters and Moderation to apply particular configurations to specific Instagram content.</li> </ol> <ol start="12"> <li>Click Settings → Sort to arrange your feed. For example, display the latest Instagram posts first by choosing Newest.</li> </ol> <ol start="13"> <li>Choose Advanced to edit the maximum concurrent API requests and enable custom templates.</li> </ol> <ol start="14"> <li>Once you’re finished editing your Instagram feed, click Save.</li> </ol> <h2>5. Integrate the Instagram Feed into WordPress</h2> <p>Now that you’ve designed the appearance, it’s time to embed Instagram feeds on your website. To do it, open a WordPress post → Block Inserter + icon → Instagram Feed.</p> <p>Alternatively, go to Smash Balloon’s feed builder → Embed → Add to a page to embed your Instagram feed to a WordPress page,</p> <p>However, the above steps only work if you only have one design. If you have multiple templates, here’s how to add a specific Instagram feed on your WordPress site:</p> <ol> <li>Open Smash Balloon’s feed builder and click Embed.</li> </ol> <ol start="2"> <li>Duplicate the shortcode on the pop-up window by selecting the Copy button.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b619962565f.jpeg" width="40%"></p> <ol start="3"> <li>Go to your WordPress dashboard → open Posts or Pages → choose the Instagram Feed block → Block → paste the code.</li> </ol> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b61996256d8.jpeg" width="40%"></p> <p>Alternatively, modify the shortcode by adding the design number on the Shortcode Settings field and clicking Apply Changes. This will automatically embed the chosen template. For example, we’re going to use feed=”2″.</p> <p><img src="https://ellohost.com/imageshack/uploads/1689655702_64b619962573e.jpeg" width="40%"></p> <ol start="4"> <li>The block will now display the embedded Instagram post. Click Publish to apply it on your website.</li> </ol> <p>If your theme doesn’t support full-site editing, embed an Instagram feed on your WordPress website using widgets. Open Smash Balloon’s feed builder → Embed → Add to a Widget.</p> <p>Alternatively, add the Instagram Feed widget by going to the WordPress dashboard → Appearance → Widgets → Widgets Inserter + icon → Instagram Feed. Drag the widget to any area on your WordPress website, like the Main Sidebar or Header.</p> <p>To display a different Instagram feed, enter the template’s shortcode via Shortcode Settings → Apply Changes → Update.</p> <br><br> <a href="https://ellohost.com"> <button style="padding: 10px 20px; background-color: blue;">Join ellohost</button> </a> </body> </html>
|
|
|
|
| Comment créer une salle de discussion sur WordPress |
|
Posted by: aaron - 07-18-2023, 04:36 AM - Forum: wordpress
- No Replies
|
|
<!DOCTYPE html> <html> <head> <title>Comment créer une salle de discussion sur WordPress</title> </head> <body> <h1>Comment créer une salle de discussion sur WordPress</h1> <p>Dans cette section, nous allons parcourir les étapes pour choisir et configurer une salle de discussion avec un plugin.</p> <h2>1. Choisissez un plugin de salle de discussion qui correspond à vos besoins</h2> <p>Les caractéristiques suivantes doivent être prises en compte lors de la recherche d'un plugin de salle de discussion pour WordPress :</p> <ul> <li>Compatibilité avec les appareils mobiles - assurez-vous d'offrir une expérience utilisateur cohérente sur les ordinateurs de bureau et les appareils mobiles.</li> <li>Salles de discussion multiples - créez des canaux de discussion pour les membres ayant des intérêts spécifiques.</li> <li>Modération de la discussion - contrôlez le comportement des utilisateurs dans la salle de discussion, comme la filtrage des mots inappropriés et le bannissement ou l'exclusion des utilisateurs.</li> <li>Personnalisation - modifiez le thème, la police et la couleur d'arrière-plan de la salle de discussion pour la rendre plus attrayante pour les membres.</li> <li>Sauvegarde - sécurisez l'historique de la discussion contenant des informations précieuses, telles que les commentaires et les fichiers multimédias.</li> </ul> <p>Si vous avez besoin d'aide pour choisir le plugin, consultez la section de cet article sur les recommandations de salle de discussion pour WordPress.</p> <h2>2. Activez et configurez le plugin</h2> <p>Une fois que vous avez choisi votre solution de salle de discussion préférée, accédez au tableau de bord d'administration de WordPress et installez le plugin.</p> <p>Tout d'abord, configurez ses paramètres pour que le plugin fonctionne correctement. Pour illustrer cela, nous utiliserons le plugin Wise Chat. Nous montrerons comment configurer les paramètres généraux et les messages postés.</p> <p>Pour accéder aux paramètres du plugin, allez dans Réglages → Réglages de Wise Chat. Dans l'onglet Général :</p> <ol> <li>Allez dans la section Paramètres d'accès à la discussion et sélectionnez "Désactiver les utilisateurs anonymes" pour limiter les participants de la discussion aux utilisateurs enregistrés uniquement.</li> <li>Faites défiler jusqu'à la section "Heures et jours d'ouverture de la discussion". Sélectionnez "Activer le contrôle d'ouverture" pour spécifier quand la discussion est disponible pour les utilisateurs.</li> <li>Enregistrez les modifications.</li> </ol> <p>Ensuite, allez dans l'onglet Messages postés et suivez ces étapes :</p> <ol> <li>Dans la section "Paramètres généraux", définissez la longueur des messages qu'un utilisateur peut envoyer en remplissant le champ. La valeur par défaut est 400.</li> <li>Allez dans la section "Notifications d'utilisateur" et ajoutez des sons de notification pour plusieurs événements, tels que les nouveaux messages, les utilisateurs en ligne et hors ligne, et les mentions d'utilisateur.</li> <li>Accédez à la section "Paramètres de pièces jointes de fichier" et choisissez si vous souhaitez activer la fonction de partage de fichiers. Si oui, déterminez les extensions de fichiers autorisées et la limite de taille.</li> <li>Enregistrez les modifications.</li> </ol> <h2>3. Ajoutez la salle de discussion à votre site WordPress</h2> <p>Vous pouvez ajouter le plugin Wise Chat à votre site Web à l'aide d'un shortcode et d'un widget. Voici comment faire :</p> <p><strong>Shortcode</strong></p> <ol> <li>Allez dans Articles → Ajouter un nouvel article pour créer un nouvel article.</li> <li>Ouvrez l'outil d'insertion de blocs et recherchez le bloc Shortcode. Alternativement, tapez /shortcode pour ajouter rapidement le bloc dans l'éditeur.</li> <li>Tapez [wise-chat] dans le champ de texte.</li> </ol> <img src="https://ellohost.com/imageshack/uploads/1689654285_64b6140d064e6.jpeg" width="50%" alt="Shortcode"> <p>4. Publiez l'article pour enregistrer les modifications.</p> <p><strong>Widget</strong></p> <ol> <li>Allez dans Apparence → Widgets.</li> <li>Cliquez sur Vue en liste et choisissez un widget dans la liste. Par exemple, nous avons utilisé le widget Barre latérale droite.</li> </ol> <img src="https://ellohost.com/imageshack/uploads/1689654285_64b6140d0641f.jpeg" width="50%" alt="Widget"> <ol start="3"> <li>Sélectionnez le bouton Ajouter un bloc et insérez le bloc Fenêtre de Wise Chat.</li> </ol> <img src="https://ellohost.com/imageshack/uploads/1689654285_64b6140d0616c.jpeg" width="50%" alt="Bloc Widget"> <ol start="4"> <li>Cliquez sur Mettre à jour pour enregistrer les modifications.</li> </ol> <h2>4. Personnalisez et testez le plugin de discussion</h2> <p>Vous pouvez modifier l'apparence de la discussion pour qu'elle corresponde au thème ou au design de votre site Web. Voici les étapes à suivre en utilisant Wise Chat :</p> <ol> <li>Ouvrez les paramètres de Wise Chat et cliquez sur Apparence.</li> <li>Dans la section Apparence de la fenêtre de discussion, choisissez un thème dans la liste déroulante. Ensuite, modifiez la couleur d'arrière-plan et de police, et spécifiez la taille de la police.</li> <li>Accédez à la section Apparence des messages et définissez le format de la date et de l'heure des messages. Sélectionnez l'option Mode d'affichage du nom d'utilisateur et choisissez Lien vers la page.</li> <li>Enregistrez les modifications.</li> </ol> <p>Enfin, testez la salle de discussion pour vérifier si elle fonctionne comme prévu :</p> <ol> <li>Ouvrez un onglet de navigation privée et visitez votre site Web.</li> <li>La fenêtre de la salle de discussion devrait apparaître en fonction de l'endroit où vous l'avez insérée.</li> <li>Essayez d'envoyer des messages texte et de télécharger des fichiers multimédias dans la salle de discussion.</li> </ol> <img src="https://ellohost.com/imageshack/uploads/1689654749_64b615dddfa22.jpeg" width="50%" alt="Salle de discussion"><br><br> <a href="https://ellohost.com"> <button style="padding: 10px 20px; background-color: blue;">Join ellohost</button> </a> </body> </html>
|
|
|
|
| How to Create a WordPress Chat Room |
|
Posted by: aaron - 07-18-2023, 04:34 AM - Forum: Wordpress
- No Replies
|
|
<!DOCTYPE html> <html> <head> <title>How to Create a WordPress Chat Room</title> </head> <body> <h1>How to Create a Chat Room on WordPress</h1> <p>In this section, we will go over the steps of choosing and setting up a chat room with a plugin.</p> <h2>1. Pick a Chat Room Plugin That Fits Your Needs</h2> <p>The following are several features you should consider when looking for a WordPress chat room plugin:</p> <ul> <li>Mobile-friendliness – ensure a consistent user experience across desktop and mobile devices.</li> <li>Multiple chat rooms – make chat room channels for members with specific interests.</li> <li>Chat moderation – control user behavior in the chat room, such as filtering bad words and banning or kicking users.</li> <li>Customization – change the chat room theme, font, and background color, making it more appealing to members.</li> <li>Backup – secure chat history containing valuable information, such as feedback and media files.</li> </ul> <p>If you need help deciding on the plugin, go to this article’s section covering WordPress chat room recommendations.</p> <h2>2. Activate and Configure the Plugin</h2> <p>Once you have picked your preferred chat room solution, head to the WordPress admin dashboard and install the plugin.</p> <p>First, configure its settings so the plugin works properly. To demonstrate, we’ll use the Wise Chat plugin. We’ll show how to configure the General and Messages Posting settings.</p> <p>To access the plugin settings, navigate to Settings → Wise Chat Settings. On the General tab:</p> <ol> <li>Go to the Chat Access Settings section and select Disable Anonymous Users to limit the chat participants to registered users only.</li> <li>Scroll down to the Chat Opening Hours and Days section. Select Enable Opening Control to specify when the chat is available for users.</li> <li>Save the changes.</li> </ol> <p>After that, navigate to the Messages Posting tab and follow these steps:</p> <ol> <li>On the General Settings section, define the length of messages a user can send by filling out the field. The default value is 400.</li> <li>Go to the User Notifications section and add notification sounds to several events, such as new messages, online and offline users, and username mentions.</li> <li>Navigate to the File Attachment Settings section and choose whether to enable the file-sharing feature. If yes, decide the allowed file extensions and size limit.</li> <li>Save the changes.</li> </ol> <h2>3. Add the Chat Room to a WordPress Website</h2> <p>You can add the Wise Chat plugin to your website via a shortcode and a widget. Here is how:</p> <p><strong>Shortcode</strong></p> <ol> <li>Navigate to Posts → Add New to create a new post.</li> <li>Open the block inserter tool and look for the Shortcode block. Alternatively, type /shortcode to quickly add the block in the editor.</li> <li>Type [wise-chat] in the text field.</li> </ol> <img src="https://ellohost.com/imageshack/uploads/1689654285_64b6140d064e6.jpeg" width="50%" alt="Shortcode"> <p>4. Publish the post to save the changes.</p> <p><strong>Widget</strong></p> <ol> <li>Go to Appearance → Widgets.</li> <li>Click List View and choose a widget from the list. For instance, we used the Right Sidebar widget.</li> </ol> <img src="https://ellohost.com/imageshack/uploads/1689654285_64b6140d0641f.jpeg" width="50%" alt="Widget"> <ol start="3"> <li>Select the Add Block button and insert the Wise Chat Window block.</li> </ol> <img src="https://ellohost.com/imageshack/uploads/1689654285_64b6140d0616c.jpeg" width="50%" alt="Widget Block"> <ol start="4"> <li>Click Update to save the changes.</li> </ol> <h2>4. Customize and Test the Chat Plugin</h2> <p>You can modify the chat appearance to fit your website’s theme or design. Here are the steps to do it using Wise Chat:</p> <ol> <li>Open Wise Chat Settings and click Appearance.</li> <li>On the Chat Window Appearance section, choose a theme from the dropdown list. Then, modify the background and font color and specify the font size.</li> <li>Go to the Message Appearance section and set the message date and time format. Select the Username Display Mode option and choose Link to page.</li> <li>Save the changes.</li> </ol> <p>Finally, test the chat room to check if it works as expected:</p> <ol> <li>Open an incognito or private browsing tab and visit your website.</li> <li>The chat room window should appear depending on where you insert it.</li> <li>Try sending text messages and uploading media to the chat room.</li> </ol> <img src="https://ellohost.com/imageshack/uploads/1689654749_64b615dddfa22.jpeg" width="50%" alt="Chat Room"> <br><br><a href="https://ellohost.com"> <button style="padding: 10px 20px; background-color: blue;">Join ellohost</button> </a> </body> </html>
|
|
|
|
| Sauvegarde complète d'un site Web via cPanel |
|
Posted by: aaron - 07-17-2023, 12:22 PM - Forum: Cpanel
- No Replies
|
|
<!DOCTYPE html> <html> <head> <title>Sauvegarde complète d'un site Web via cPanel</title> </head> <body> <h1>Génération et téléchargement d'une sauvegarde complète de site Web via cPanel</h1> <p>cPanel offre plusieurs options de sauvegarde à ses utilisateurs : sauvegarde complète automatique, sauvegarde partielle et sauvegarde manuelle.</p> <h2>Option 1 : Sauvegarde complète automatique du compte</h2> <p>Ce type de solution de sauvegarde vous permet de créer une sauvegarde complète du compte, y compris le répertoire principal du site Web, les bases de données MySQL, les e-mails et les paramètres DNS. Elle est principalement utilisée pour transférer votre compte vers un autre fournisseur d'hébergement.</p> <h4>Étapes :</h4> <ol> <li>Rendez-vous dans Fichiers → Sauvegarde.</li> <img src="https://ellohost.com/imageshack/uploads/1689596099_64b530c3d0c5a.jpeg" width="40%"> <li>Sous Sauvegarde complète, cliquez sur Télécharger une sauvegarde complète du compte.</li> <li>Dans le menu déroulant Destination de la sauvegarde, sélectionnez Répertoire principal.</li> <img src="https://ellohost.com/imageshack/uploads/1689596099_64b530c3d0d51.jpeg" width="40%"> <li>Cliquez sur Générer la sauvegarde, et la sauvegarde démarrera automatiquement.</li> <li>Retournez en arrière et vérifiez si vos fichiers sont prêts à être téléchargés. S'ils sont encore en cours de sauvegarde, attendez quelques minutes et actualisez la page.</li> <li>Vous verrez des liens sous Sauvegardes disponibles au téléchargement. Sélectionnez le plus récent.</li> <img src="https://ellohost.com/imageshack/uploads/1689596099_64b530c3d0df5.jpeg" width="40%"> </ol> <h2>Option 2 : Sauvegarde automatique du répertoire principal</h2> <p>Cette méthode de sauvegarde est la plus simple parmi les options disponibles, car elle ne nécessite qu'un seul clic. Cependant, elle ne sauvegarde que vos fichiers et e-mails.</p> <h4>Étapes :</h4> <ol> <li>Depuis votre tableau de bord cPanel, accédez à Fichiers → Sauvegardes.</li> <li>Trouvez la section Sauvegardes partielles, cliquez sur le bouton Répertoire principal.</li> <img src="https://ellohost.com/imageshack/uploads/1689596099_64b530c3d0eac.jpeg" width="40%"> <li>Le processus de téléchargement démarrera automatiquement.</li> </ol> <h2>Option 3 : Sauvegarde manuelle du site</h2> <p>Cette fonction de sauvegarde vous permet de sauvegarder uniquement les fichiers sélectionnés. Cependant, les étapes pour sauvegarder le contenu du site sans outil de sauvegarde spécialisé sont un peu plus compliquées.</p> <h4>Étapes :</h4> <ol> <li>Connectez-vous à cPanel et accédez à Fichiers → Gestionnaire de fichiers.</li> <li>Localisez le répertoire principal de votre site et faites un clic droit pour compresser.</li> <img src="https://ellohost.com/imageshack/uploads/1689596099_64b530c3d0f4b.jpeg" width="40%"> <li>Choisissez un type de compression. Nous recommandons soit le format Zip, soit le format Tar, puis cliquez sur Compresser le(s) fichier(s).</li> <img src="https://ellohost.com/imageshack/uploads/1689596099_64b530c3d1022.jpeg" width="40%"> <li>Fermez la fenêtre Résultats de la compression et retournez au Gestionnaire de fichiers pour localiser le fichier généré.</li> <li>Sélectionnez le fichier, dans ce cas, public_html.zip. Accédez à la barre de menu supérieure et cliquez sur Télécharger.</li> </ol> <h2>Option 4 : Utilisation de l'Assistant de sauvegarde</h2> <p>cPanel dispose également d'un logiciel de sauvegarde convivial pour les débutants, qui est utile pour ceux qui ne sont pas familiers avec les sauvegardes de site Web. Si vous avez peur de faire une erreur lors de la sauvegarde de votre site manuellement, suivez simplement les étapes ci-dessous :</p> <h4>Étapes :</h4> <ol> <li>Connectez-vous à cPanel et accédez à Fichiers → Assistant de sauvegarde.</li> <img src="https://ellohost.com/imageshack/uploads/1689596099_64b530c3d1105.jpeg" width="40%"> <li>Cliquez sur le bouton Sauvegarder.</li> <li>Choisissez le type de sauvegarde souhaité : sauvegarde complète ou sauvegarde partielle.</li> <li>Sélectionnez Répertoire principal comme destination de la sauvegarde.</li> <li>N'hésitez pas à saisir votre adresse e-mail si vous souhaitez recevoir une notification par e-mail une fois la sauvegarde terminée.</li> <img src="https://ellohost.com/imageshack/uploads/1689596099_64b530c3d1178.jpeg" width="40%"> <li>Cliquez sur Générer la sauvegarde, attendez quelques minutes, puis cliquez sur Retour.</li> <li>Sous Sauvegardes disponibles au téléchargement, cliquez sur le lien pour télécharger le fichier de sauvegarde.</li> <img src="https://ellohost.com/imageshack/uploads/1689596099_64b530c3d1208.jpeg" width="40%"> </ol> <a href="https://ellohost.com"> <button style="padding: 10px 20px; background-color: blue;">Rejoindre ellohost</button> </a> </body> </html>
|
|
|
|
|
