Content
- 01. Instal·leu una nova còpia de WordPress
- 02. Elimineu els connectors predeterminats
- 03. Afegiu un tipus de publicació personalitzada
- 04. La interfície de tipus de publicació personalitzada per afegir / editar
- 05. Creeu un llimac de reescriptura personalitzat
- 06. Afegiu suport per a camps personalitzats
- 07. Afegiu camps personalitzats
- 08. Configureu els camps
- 09. Creeu el fitxer de plantilla de WordPress
- 10. Creeu un disseny de publicació única d'amplada completa
- 11. Inicieu el bucle i creeu el contingut
- 12. Utilitzeu PHP per cridar valors dinàmics
- 13. Feu un client de prova amb algunes dades falses
- 14. Manejar els errors de les dades que falten
- 15. Ordeneu la interfície
- 16. Excloeu-lo del mapa del lloc
Els consumidors esperen que hi hagi una àrea que permeti als usuaris iniciar sessió i descarregar o visualitzar documents, des de contractes de telefonia fins a serveis públics.
Tanmateix, quan els dissenyadors treballen amb els seus clients, tot pot dividir-se ràpidament en un embolic de correus electrònics, enllaços a maquetes i fitxers adjunts.
Aquest tutorial de WordPress mostrarà com estendre WordPress (hi ha altres serveis d'allotjament web disponibles) a un portal de clients capaç d'emmagatzemar documents, vídeos i dibuixos, de manera que un client pugui accedir-hi a tots en un sol lloc. El portal donarà servei a cada client amb un enllaç únic i protegit amb contrasenya que no apareix a la navegació habitual.
Es faran servir tipus i camps de publicacions personalitzats per emmagatzemar les dades, que s’afegiran a través de connectors, per evitar la pèrdua de dades si el tema canvia. El tema es modificarà lleugerament.
Disposar d’un portal de clients ofereix als clients la comoditat d’accedir als seus fitxers al mateix lloc, sempre que els necessiten, de la mateixa manera que quan s’utilitza l’emmagatzematge al núvol. Té una àmplia gamma d’avantatges empresarials, com ara mostrar vendes disponibles, o es pot utilitzar per donar una visió general del procés de treball des del principi esbossant visualment els lliuraments.
Descarregueu els fitxers per a aquest tutorial.
- Com convertir WordPress en un creador visual
01. Instal·leu una nova còpia de WordPress
S'instal·la una nova còpia de WordPress al servidor de desenvolupament i s'ha escollit el tema "understrap" per donar una base fonamental per començar ràpidament a treballar. S’utilitzarà el connector UI de tipus de publicació personalitzada de manera que els nostres tipus de publicacions personalitzades siguin independents del tema.
02. Elimineu els connectors predeterminats
Si hi ha cap complement predeterminat amb la còpia de WordPress, suprimiu-los. Els connectors necessaris per a aquest tutorial són "Camps personalitzats avançats" i "IU de tipus de publicació personalitzada". També s'ha instal·lat "Classic Editor".
03. Afegiu un tipus de publicació personalitzada
Amb la interfície de la IU de tipus de publicació personalitzada, afegiu un tipus de publicació nou anomenat "client". Quan introduïu el "Slug de tipus Publicació", utilitzeu guions baixos en lloc d'espais i escriviu en forma singular, ja que facilitarà la creació de plantilles més endavant. S'ha afegit el prefix tu_ per reduir les possibilitats de conflicte.
04. La interfície de tipus de publicació personalitzada per afegir / editar
Afegiu un plural amb l'etiqueta "clients" i "client" singular, ja que apareixerà al menú d'administració de WordPress. En aquests camps s’accepta majúscules, cosa que farà que el menú de WordPress sigui més net.
05. Creeu un llimac de reescriptura personalitzat
Si utilitzeu un prefix per al tipus slug de publicació, els clients afegits al portal es crearan amb un enllaç que sembli "/ tu_customer / example-company". Això no sembla ordenat i s’utilitza el llimac de reescriptura personalitzat per millorar-ho. Si configureu el slug de reescriptura a "clients", el tipus de publicació personalitzada apareixerà com a / clients / example-company.
06. Afegiu suport per a camps personalitzats
L'última opció habilitada per al tipus de publicació personalitzada és "Suports> Camp personalitzat" que es troba a la part inferior de la pàgina. Marqueu aquesta opció i, a continuació, "afegiu un tipus de publicació" a la part inferior de la pàgina. Això envia els canvis i registra el tipus de publicació.
07. Afegiu camps personalitzats
Ara cal afegir camps personalitzats i assignar-los al tipus de publicació que s’acaba de crear. Afegir un grup de camps anomenat "portal del client" és el primer pas, seguit d'afegir-hi camps personalitzats amb el botó Afegeix camp. El primer camp "breu" s'establirà com a tipus de camp "fitxer", que permet a l'administrador carregar un fitxer en aquesta ubicació. Establiu el valor de retorn a "URL del fitxer".
08. Configureu els camps
El següent camp que cal afegir és "qüestionari de marca". Consistirà en un enllaç a un formulari de Google que hauria d'emplenar el client. El tipus de camp més adequat per a això és "URL". Aquest mateix mètode es pot utilitzar per a tots els camps que s’enllaçaran a un servei extern. En acabar, desplaceu-vos cap avall fins al quadre "ubicació" i utilitzeu la lògica "Mostra si el tipus de publicació" = "Client". A continuació, publiqueu el grup de camp.
09. Creeu el fitxer de plantilla de WordPress
WordPress ha de saber mostrar un tauler de control de clients. Per a això, se segueix la jerarquia de plantilles de WordPress per crear un fitxer de plantilla per a aquest tipus de publicació específica. Creeu un fitxer anomenat single-tu_customer.php al directori del tema arrel.
10. Creeu un disseny de publicació única d'amplada completa
Obriu el fitxer single-tu_customer.php i afegiu les funcions get_header i get_footer de WordPress. Entre aquestes funcions, creeu un disseny d'amplada completa per contenir el contingut que funcioni amb el vostre tema.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Contingut -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Inicieu el bucle i creeu el contingut
Dins de l'element> principal, truqueu a the_post i creeu els elements del contenidor per contenir informació. Utilitzeu informació de marcador de posició per fer-vos una idea del disseny i comenceu a dissenyar els elements. Els elements de la targeta seran targetes d’arrencada amb capçalera, descripció i enllaç.
main id = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Contingut / div> div> Contingut / div> div> Contingut / div> / div> / div>? php al mateix temps; // final del bucle. ?> var13 -> / main>! - #main ->
12. Utilitzeu PHP per cridar valors dinàmics
Mitjançant la funció "the_field", una funció que inclou el connector de camps personalitzats avançats, el contingut dinàmic dels camps personalitzats s'introdueix a la plantilla del client. El "nom_camp" és el valor que s'ha introduït al pas 3.
div> div> h5> Brief / h5> p> Aquest és el vostre document breu original / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Open / a > / div> / div>
13. Feu un client de prova amb algunes dades falses
Accedint al tauler de WordPress, es pot afegir un client nou des de la barra esquerra. Clients> Afegeix un client nou. La visualització de publicacions serà familiar, però el desplaçament cap avall revelarà tots els nous camps personalitzats. Introduïu algunes dades de prova per assegurar-vos que tot funciona correctament.
14. Manejar els errors de les dades que falten
Si s’oblida un document o simplement és massa aviat en el procés perquè aquest document estigui disponible, pot resultar confús per al client quan el botó no funciona. Afegir una comprovació que existeix un valor abans de mostrar-lo dóna la possibilitat de mostrar una variació del "camp que falta" de la carta. Si afegiu una classe "desactivada" a la targeta quan falta el valor, ens permetrà estilitzar les targetes no disponibles.
? php if (get_field ('nom_camp')):?> var13 -> es mostra quan el nom_camp té un valor? php else: // nom_camp ha retornat fals?> var13 -> es mostra quan el camp no existeix? php endif ; // final de la lògica de nom_camp?> var13 ->
15. Ordeneu la interfície
Ara que s'ha acabat l'estructura de la interfície, es pot dissenyar correctament. Mitjançant CSS es pot millorar l’aspecte de les cartes i els colors de la pàgina. El color de la navegació s’ha canviat a un blau més clar i s’ha millorat la direcció de l’usuari afegint text de presentació.
16. Excloeu-lo del mapa del lloc
Els tipus de publicacions personalitzades no es poden trobar als resultats dels motors de cerca. Cal excloure el tipus de publicació del mapa del lloc del lloc web, ja sigui mitjançant un connector de SEO o manualment mitjançant una metaetiqueta i robots.txt.
meta name = "robots" content = "noindex, nofollow" /> Agent d'usuari: * No permetre: / clients /
Voleu dissenyar un lloc web nou? Utilitzeu un brillant creador de llocs web per fer el procés molt senzill.
