Comment utiliser un iPad pour le développement du thème WordPress

Après l'université, j'ai dû utiliser l'iPad Pro pour suivre des cours avant d'acheter mon MacBook Air (en passant, la puce M1 est géniale). Cependant, en tant qu'étudiant en informatique, j'ai dû trouver un moyen de programmer avec. J'ai donc commencé à chercher la meilleure façon de programmer sur mon iPad.

Au début, j'ai trouvé de bonnes options, mais ce n'était pas parfait car je ne pouvais pas exécuter de code ou de programme que je voulais en raison du manque de permis de ligne de commande ou de racine. J'aurais pu utiliser des plates-formes comme Coder, Gitpod, GitHub Codespaces et même Replit, mais ce ne sont pas ce que je veux.

Mais ensuite, j'ai trouvé le programme parfait. Il est gratuit, open source et peut être hébergé seul. C'est aussi la base de Coder, une plate-forme que j'ai découverte lors de la recherche. Il est appelé code-serveur et est essentiellement un code géré vs qui a un accès complet au système de fichiers du serveur.

Au départ, mon cas d'utilisation était la programmation Java (qui est le langage que nous apprenons en classe), mais j'ai rapidement réalisé que je pouvais l'utiliser pour d'autres tâches de programmation, c'est-à-dire le développement du thème WordPress aussi!

Condition préalable

Vous avez besoin de deux choses pour commencer:

• Un serveur Linux avec un accès root. J'utilise personnellement OVH VPS. Le Raspberry Pi est également OK, mais les étapes sont plus compliquées et dépassent le cadre de cet article.
• Un iPad ou tout autre appareil qui n'est généralement pas disponible pour la programmation (comme un Chromebook).

Je suppose que vous travaillez sur le même serveur que votre site WordPress. En outre, il est important de noter que ce guide est écrit à l'aide d'Ubuntu 20.04.2 LTS.

Installer

Tout d'abord, nous devons nous connecter à notre serveur via SSH. Si vous utilisez un iPad, je recommande d'utiliser Terrius car il est parfait pour nos besoins. Une fois que nous nous connectons au serveur, nous installerons le serveur de code, qui nécessite des autorisations root / sudo.

L'installation est très simple; en fait, une seule commande de terminal est requise. La même commande est également utilisée lors de la mise à niveau:

 <code>curl -fsSL https://code-server.dev/install.sh | sh</code>

Configuration

Après avoir installé Code-Server, nous pouvons le configurer via plusieurs méthodes. Nous pouvons exécuter le serveur de code directement et cela fonctionne - mais il manque également de HTTPS et ne fournit que l'authentification de base. J'ai toujours voulu que HTTPS soit activé et mon domaine en a également besoin.

Il existe également plusieurs façons d'activer HTTPS. La première méthode de la documentation de code-serveur utilise, le proxy, tel que Nginx ou Caddy. Bien que cela fonctionne très bien, cela nécessite plus de configuration manuelle et je ne veux pas m'en soucier. Cependant, Code-Server propose également une autre option, --link , qui fonctionne bien, bien qu'il soit dans la phase bêta. Cet drapeau définit le certificat TLS, l'authentification GitHub et une URL CDR.CO dédiée! Aucune configuration requise! Si cool‽ Pour le définir, exécutez cette commande (cette commande ne nécessite pas d'accès root / sudo, aucun utilisateur ordinaire peut):

 <code>code-server --link</code>

Cela crée une URL pour que nous puissions se connecter à votre compte GitHub afin qu'il sache quel compte autoriser. Une fois terminé, nous aurons une URL dédiée et tout est prêt! Chaque utilisateur a sa propre configuration et son compte GitHub, donc je pense que techniquement, il est possible d'exécuter plusieurs instances pour plusieurs personnes en même temps. Cependant, je ne l'ai pas testé.

Après avoir configuré le compte GitHub, nous appuyerons sur CTRL C pour arrêter le processus.

Exécution <code>code-server --link</code> fournira une URL de connexion.

Cliquez sur l'URL dans Terrius l'ouvre dans Safari.

Après avoir connecté, GitHub autorisera votre compte.

Une fois l'application autorisée, elle devrait vous amener directement à une interface familière!

Pour en revenir à notre session SSH, nous pouvons voir que l'URL permanente est maintenant disponible! N'oubliez pas que cela ne fonctionne que lorsque le serveur de code est en cours d'exécution.

Définir les dépendances du thème WordPress

Il existe de nombreuses façons de faire le développement du thème WordPress, mais j'aime vraiment la façon dont les soulignements d'Automattic (_s) l'est, donc nous commencerons par cela.

Pour commencer avec _s, installons le compositeur. Parce que je suppose que vous êtes sur le même serveur que votre site Web WordPress, PHP est déjà installé. Bien que je puisse énumérer les étapes ici, le site Web du compositeur a fait mieux que moi.

Après avoir installé Composer, nous devons installer Node.js en exécutant la commande suivante dans le terminal:

 <code>cd ~ curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh sudo bash nodesource_setup.sh sudo apt install nodejs node -v</code>

Ces commandes ajoutent un nœud mis à jour PPA - parce que celui que Ubuntu contient est obsolète (nœud 10!) - puis installer le nœud et obtenir sa version.

La dernière commande doit retourner quelque chose comme v16.6.1, ce qui signifie que nous sommes prêts!

Configuration du thème

Pour définir le thème _s, nous exécutons npx degit automattic/_s my-cool-theme . Cela télécharge le code _s dans un dossier nommé my-cool-thème. Si vous souhaitez que le thème soit situé directement dans votre répertoire de thème WordPress, vous pouvez déplacer le dossier, créer un lien symbolique pour lui ou fournir le chemin complet vers le dossier de la commande précédente. Personnellement, je préfère compresser mes fichiers en exécutant npm run bundle , puis en le décompressant manuellement dans mon dossier de thème.

Une fois que tout cela est fait, exécutons <code>code-server --link</code> , ouvrons notre navigateur et naviguons vers notre URL!

Dans notre instance VS Code, nous pouvons ouvrir un dossier contenant notre thème et suivre les étapes QuickStart de _S pour nommer correctement notre thème. Ensuite, dans le terminal intégré, nous exécutons composer install et npm install . Cela installera tous les packages requis pour le thème. Je n'expliquerai pas comment les thèmes WordPress fonctionnent, comme beaucoup plus de personnes expérimentées l'ont fait.

C'est tout! Notre serveur a maintenant tout ce dont nous avons besoin pour développer des thèmes WordPress sympas à l'aide d'un iPad ou de tout autre appareil avec un navigateur et un clavier. Une fois leur nouveau navigateur libéré, nous pouvons même utiliser Xbox.

Processus de développement

Tout ce que nous avons discuté semble génial en théorie, non? Ce que vous vous demandez peut-être, c'est ce que c'est vraiment de développer sur un iPad avec cette configuration. J'ai enregistré la vidéo suivante pour montrer à quoi cela ressemble. Cela ne dure que quelques minutes, mais je pense que cela reflète une bonne idée de ce qui se passe dans le développement WordPress.

Quelques instructions sur cette configuration

Étant donné que Code-Server utilise le code open source vs - pas la version de Microsoft - quelque chose est manquant. Il n'utilise pas non plus le marché d'expansion de Microsoft, ce qui signifie que toutes les extensions ne sont pas disponibles. Nous ne pouvons pas nous connecter à notre compte Microsoft ou GitHub pour synchroniser nos paramètres, mais nous pouvons également utiliser l'extension Sync Sync, bien que j'ai personnellement du mal à l'utiliser pour synchroniser mes extensions. Chaque utilisateur Linux a ses propres paramètres et extensions, enregistrés dans ce dossier: ~/.local/share/code-server . Il est similaire à la structure du dossier d'une installation régulière vs de code.

Il existe également des moyens d'exécuter du serveur de code en tant que service au lieu d'exécuter directement dans une session SSH afin qu'il s'exécute toujours, mais je préfère l'ouvrir si nécessaire.

Quelques conseils spécifiques à l'iPad

Si vous prévoyez d'utiliser votre iPad comme moi, voici quelques conseils pour rendre votre expérience plus agréable!

• Activez la fonction de suivi de l'emplacement dans Terrius car il maintient la connexion SSH active même lorsque l'application s'exécute en arrière-plan.
• Ouvrez le site Web avec Safari et ouvrez la table de partage pour l'ajouter à votre écran d'accueil! Vive pwa!
• Safari Caches Content de manière très agressive et Clearing Caches est très ennuyeux. La seule façon dont j'ai trouvé est essentiellement de nettoyer l'histoire du navigateur, ce qui n'est pas idéal. Il n'a pas de "rafraîchissement de force" comme tout autre navigateur de bureau. Chrome pourrait cependant mieux le gérer.
• Achetez un clavier Bluetooth, ou même un boîtier de protection (le Brydge est un bon choix) car il le fait ressembler plus à un ordinateur portable qu'à une tablette. Le clavier physique rend l'expérience 1 000 fois meilleure que le clavier à l'écran!
• Les iPads "perdent" l'orientation de l'éditeur, en particulier lors de la commutation entre les applications, ce qui rend impossible la saisie. Je résolve généralement ce problème en cliquant sur la barre latérale puis en cliquant sur l'éditeur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!