Come creare un’app mobile per wordpress con dati personalizzati

Ciao a tutti amici, ormai siamo a giovedi attendendo il week end ho letto che avete interesse per le app cosi ho deciso di creare un articolo che preso alla lettera vi farà creare un app agressiva e vincente , noto che molti non hanno compreso cosa sia jollygadget ma verrà spiegato nei minimi particolari in quanto oggi con panorama assurdo online credetemi è una risorsa preziosa… non intendo annoiarvi partiamo:

Il traffico mobile diventa ancora più grande dei desktop di oggi. Quindi, molte persone sono interessanti su come creare app mobile Android e iOS per i loro siti Web. Ecco alcune tecniche per questo.

Prima di tutto, penso che l’app per dispositivi mobili debba avere un altro aspetto e offrire un’esperienza utente diversa. Se vuoi avere la stessa logica del sito desktop principale, è meglio mantenerlo così com’è senza app mobile o utilizzare AMP .

Il modo migliore per creare un’app mobile è creare o ordinare dagli sviluppatori di app mobili. Il problema è che lo sviluppo di app mobili è molto costoso. Non credo che creare app a meno di $ 3000 abbia senso. Che cos’è l’alternativa? Sta usando plugin speciali. Ho studiato diversi plugin più popolari per wordpress che consente di creare app per dispositivi mobili ed ecco la mia recensione.

Apppresser

Penso che sia il plug-in più potente per la creazione di app. Ha funzionalità molto interessanti e consente di creare applicazioni davvero potenti. E questo perché ha alcune potenti funzionalità.

Pagine personalizzate

Prima di tutto, puoi creare home page personalizzate e personalizzarle in diversi modi. Ad esempio, la home page può essere impostata come schede dei collegamenti

O come landing page, pagina elenco post o anche come mappa

Le pagine personalizzate possono avere il proprio codice html e persino componenti ionici  . Significa che puoi aggiungere cursori, carte, fisarmoniche, mediaplay e altre parti dinamiche alle tue pagine personalizzate.

Pubblica annunci

La seconda cosa che è importante in Apppresser è che consentono di personalizzare i loop post e utilizzare gli endpoint API REST di wordpress. Ciò significa che è possibile creare un elenco speciale, ad esempio, da eventi o da elenchi di directory, elenchi di prodotti, elenchi di post di determinate categorie, autori o tag. Questo può essere utile se vuoi creare la pagina dei post più popolari o un archivio specifico.

Personalizzazione e ganci modello

Questa cosa è molto potente per me e di solito altri sviluppatori di plugin la ignorano. Naturalmente, molti temi e plugin aggiungono molte informazioni nei post, come prezzi, mappe, date, specifiche. La maggior parte dei plug-in delle app ignora questi dati e utilizza solo il contenuto standard di wordpress. Ma Apppresser consente di aggiungere tali dati non solo nei post interni, ma anche negli elenchi personalizzati. Hanno molti hook di modello e tutorial come usarli  , anche opzioni css personalizzati e temi figlio . qui ad ogni voce avrete le dovute spiegazioni,ci tengo a precisare che siamo pionieri del web presenti dal 1990 online e avendo creato progetti innumerevoli, seguiteci e avrete successo, (abbiamo anche school business vedi ilvostrocoach,clientivincenti,apriloshop,lofacciamoperte, dragonbot, etc etc)

Funzioni di accesso speciali

Un’altra cosa positiva sono le opzioni dei membri. Ad esempio, login modali e pagine

Esistono molte altre funzioni disponibili, come la notifica push personalizzata, il modulo Buddypress con attività e l’opzione per utilizzare la fotocamera per il caricamento di immagini, il modulo Woocommerce e le pagine offline. Puoi creare un’app mobile davvero professionale con Apppresser, ma c’è solo una brutta notizia: il PREZZO. Per il piano di base, devi pagare $ 19 ogni mese, il che è troppo caro per i siti di piccole dimensioni. Inoltre, questo piano è di base e non ha molti moduli interessanti, come il woocommerce, Admob

Il piano di agenzia è più interessante e ha un prezzo di $ 49 al mese, ma puoi creare 25 app. Quindi, ogni app avrà un prezzo vicino a $ 2 al mese, ma, penso che questo piano sia buono per gli sviluppatori e le piccole aziende indipendenti che offrono la creazione di aps mobili, ma non per i proprietari di siti. Spero che presto faranno un piano speciale per i proprietari dei siti, perché è un ottimo plugin

App per dispositivi mobili WordApp

Questo è il secondo plugin che mi piace. Ha anche un buon design e alcune opzioni di personalizzazione.

Proprio come il plugin precedente, WApp può avere logo, menu, colori, sfondo, icone personalizzati. permette di aggiungere anche menu in basso con icone.

Il plugin ha anche la possibilità di utilizzare pagine personalizzate come pagina iniziale e puoi anche scegliere un tema separato per l’app. Invece di Apppresser, il plug-in utilizza le pagine wordpress predefinite così come sono. A dire il vero, non penso che tali pagine funzioneranno correttamente, specialmente se hanno script personalizzati, moduli che funzionano sulla versione desktop.

Il problema è che l’anteprima della colonna di destra funziona solo a scopo dimostrativo, l’anteprima reale è disponibile solo se si fa clic sul pulsante rosso, ma non è disponibile nella versione gratuita. ma qui intervengo ancora e vi dico non spaventatevi dei costi noi siamo gentleweb una nuova figura gentili web in quanto formiamo persone nella plr,pnl entrando con noi gratis chi lo desidera puo fare upgrade e offriamo metodi che nessuno online e sottolineo nessuno vi svelerà mai……. se siete interessati iscrivetevi al sito cliccate messenger entrando nella school online e rimarrete di stucco…..

Il problema è che l’anteprima della colonna di destra funziona solo a scopo dimostrativo, l’anteprima reale è disponibile solo se si fa clic sul pulsante rosso, ma non è disponibile nella versione gratuita.

La versione Pro non ha un prezzo elevato e parte da $ 2,99 al mese. Ma è un problema che devo pagare prima di poter verificare se la mia app funzionerà come voglio. L’uso del tema desktop all’interno dell’app mobile può causare alcuni problemi, ma in realtà è possibile utilizzare un tema separato per l’app, è possibile utilizzare temi predefiniti che devono funzionare. Inoltre, il plugin ha circa 20 diversi temi in bundle ed è uno dei vantaggi del plugin.

Un’altra cosa positiva, che puoi usare Admob per monetizzare la tua app.

Pro prevede anche l’opzione di inviare notifiche push.

I prezzi della versione PRO sono molto più economici rispetto al plugin precedente e il piano più costoso ha circa $ 6 al mese. Ciò includerà tutte le funzioni professionali + disabilitazione dei diritti d’autore dell’autore sulla tua app e sugli annunci dell’autore.

Secondo me, questa è una buona alternativa per Apppresser se non hai abbastanza soldi.

Worona

Questo plugin è nuovo e sembra promettente. Attualmente, non hanno qualcosa di interessante, l’unica cosa è che è totalmente gratuito e l’installazione è davvero veloce. La personalizzazione è molto semplice, puoi cambiare solo i menu e i colori dell’intestazione. Ma li sto seguendo, perché sviluppano plugin.

Come personalizzare il contenuto dei post interni nelle app mobili

Quasi tutti i costruttori di app mobili utilizzano l’API REST di wordpress. Dalla versione 4.7 di wordpress, l’API REST è all’interno del core di wordpress e penso che lo sviluppo di wordpress si concentrerà sull’API REST. Questa è una cosa davvero potente, che può aiutare a combinare tutte le app, le estensioni del desktop e persino le cose offline reali in una combinazione con il sito wordpress. L’API REST è un modo per archiviare i dati che può essere utilizzato ovunque, in qualsiasi gadget o applicazione.

Quindi, come ho scritto, la maggior parte dei plug-in di app builder utilizza le richieste API REST per wordpress per ottenere i dati dei post. Il problema è che wordpress contiene informazioni di base nell’API REST per i post e non include i valori dei campi personalizzati utilizzati da tutti i temi e plug-in. Ad esempio, il tuo post ha dei prezzi, o valori delle visualizzazioni dei post, o forse memorizzi la data del tuo evento, luogo, ecc. Tutto questo non sarà disponibile nel contenuto dei post nell’API REST. Pertanto, è necessario estendere il contenuto o creare campi separati per l’API.

Per testare le tue personalizzazioni, ti consiglio di utilizzare google chrome e la loro estensione Postman, che è la cosa migliore per testare diverse API.

Per la creazione di campi separati, è possibile utilizzare il codice successivo.

1234567891011121314add_action( ‘rest_api_init’, ‘appp_register_post_meta’ );function appp_register_post_meta() {    register_rest_field( ‘post’, // any post type registered with API        ‘rehub_main_product_price’, // this needs to match meta key        array(            ‘get_callback’    => ‘appp_get_meta’,            ‘update_callback’ => null,            ‘schema’          => null,        )    );}function appp_get_meta( $object, $field_name, $request ) {    return get_post_meta( $object[ ‘id’ ], $field_name, true );}

questo codice aggiungerà un campo aggiuntivo rehub_main_product_price in ogni richiesta di post. rehub_main_product_price è un campo personalizzato del mio tema in cui memorizzo il miglior prezzo.

Non voglio prestare molta attenzione a questo codice, perché, di solito, non è necessario in questo modo utilizzare con i costruttori di app, perché non riconoscono tali campi e li ignorano. Puoi leggere di più in questo modo nei documenti .

Il secondo modo è più comunemente usato per il generatore di app. Invece di registrare un nuovo campo per l’API REST, è possibile modificare la risposta del contenuto dei post e allegare dati aggiuntivi direttamente ai contenuti del post. Quindi, ad esempio, vuoi mostrare il prezzo del miglior affare che hai archiviato nel campo con il nome “rehub_main_product_price” e vuoi anche mostrare il miglior commerciante e l’icona. Qualcosa come questo.

Nel mio tema, tale blocco è memorizzato nelle chiavi successive dei campi personalizzati.

Prezzo – rehub_offer_product_price

Prezzo vecchio – rehub_offer_product_price_old

Dominio del miglior commerciante – rehub_offer_domain

Quindi, il mio codice per aggiungere questo blocco al contenuto avrà un aspetto successivo

123456789101112131415161718192021222324252627282930add_filter( ‘rest_prepare_post’, ‘dt_use_raw_post_content’, 10, 3 );function dt_use_raw_post_content( $data, $post, $request ) { $out = ”; $offerprice = get_post_meta($post->ID, ‘rehub_offer_product_price’, true ); $offeroldprice = get_post_meta($post->ID, ‘rehub_offer_product_price_old’, true ); $domain = get_post_meta($post->ID, ‘rehub_offer_domain’, true ); $offerurl = get_post_meta($post->ID, ‘rehub_offer_product_url’, true ); if ($offerurl) { $out .='<div class=”compare-button-holder”>’; if ($offerprice) { $out .='<p class=”price”>’; $out .=$offerprice.’ ‘; if ($offeroldprice) { $out .='<del>’.$offeroldprice.'</del>’; } $out .='</p>’; } if($domain){ $out .='<div class=”mb10 compare-domain-icon”><span>Best deal on: </span>’; $out .=rehub_get_site_favicon(‘http://’.$domain); $out .='</div>’; } $out .='<a href=”‘.esc_url($offerurl).'” class=”re_track_btn wpsm-button rehub_main_btn btn_offer_block” target=”_blank” rel=”nofollow”>Buy for best price</a>’; $out .='</div>’; }     $newdata = $data->data[‘content’][‘rendered’].$out;    $data->data[‘content’][‘rendered’] = $newdata;    return $data;}

Qualche spiegazione. Innanzitutto, utilizziamo il filtro rest_prepare_post che modifica il contenuto dei post nella risposta dell’API REST. Quando lo facciamo, possiamo usare $ post-> ID per ottenere qualsiasi cosa dalla posta, come i campi personalizzati. Possiamo ottenere contenuti predefiniti con

1$data->data[‘content’][‘rendered’]

Nell’ultima riga assegniamo un nuovo blocco a questo contenuto. Se è necessario assegnare il blocco prima del contenuto, passare a

1$newdata = $out.$data->data[‘content’][‘rendered’];

Se si desidera assegnare qualcosa per estratto anziché contenuto, è possibile modificare le ultime due righe

12 $newdata = $data->data[‘excerpt’][‘rendered’].$out; $data->data[‘excerpt’][‘rendered’] = $newdata;

Puoi usare lo stesso modo per cambiare anche i titoli. Ad esempio, potresti voler aggiungere il prezzo direttamente nel titolo. Quindi, nelle ultime righe, prima di restituire $ data, aggiungi anche il codice successivo

12    $newtitle = $data->data[‘title’][‘rendered’].’ – ‘.$offerprice;    $data->data[‘title’][‘rendered’] = $newtitle;

Per controllare la risposta ed essere sicuri che tutto funzioni, usa Postman e fai la richiesta GET a uno dei post route. Url per questo sarà

http://yoursite.com/wp-json/wp/v2/posts/240

dove 240 è il tuo ID di posta.

Come vedi, tutto funziona.

La prossima cosa è lo styling. Quello che devo fare è copiare tutti gli stili per l’elemento del blocco nello stile dell’app. Molti app builder hanno la possibilità di aggiungere stili personalizzati per questo. Quindi, premo F12 in Chrome per aprire lo strumento di sviluppo in cui posso controllare gli stili dei miei elementi

Fare clic sull’icona e fare clic sull’elemento che si desidera controllare.

Quindi, per il mio blocco, gli stili saranno i prossimi

12345678.compare-button-holder .price {font-weight: normal;font-size: 1.5em;font-family: “Roboto”,Arial;letter-spacing: -0.5px; padding: 0 0 15px 0;margin: 0;}.mb10 { margin-bottom: 10px;}.compare-domain-icon {font-weight: bold;}.compare-domain-icon span { font-weight: normal;}.compare-domain-icon img {vertical-align: middle;max-width: 80px;}.compare-button-holder .wpsm-button.rehub_main_btn {box-shadow: 0 18px 38px 0 rgba(0,0,0,0.06),0 8px 40px 0 rgba(0,0,0,0.06);}.wpsm-button.rehub_main_btn {font-family: Roboto,trebuchet ms;position: relative;font-size: 18px;line-height: 18px;padding: 10px 20px;font-weight: 700;background: none #43c801;color: #fff !important;border: none;text-decoration: none; outline: 0;border-radius: 100px;cursor: pointer;display: inline-block;}.price del {font-size: 70%;opacity: 0.3;}

Non tutti i plug-in hanno l’opzione di utilizzare gli stili, se si dispone di tale opzione, inserire lì gli stili CSS. in caso contrario, puoi provare ad assegnare gli stili direttamente ai contenuti, spero che questo funzioni nella tua app. Quindi, sarà il codice con gli stili

1234567891011121314151617181920212223242526272829303132333435add_filter( ‘rest_prepare_post’, ‘dt_use_raw_post_content’, 10, 3 );function dt_use_raw_post_content( $data, $post, $request ) { $out = ”; $offerprice = get_post_meta($post->ID, ‘rehub_offer_product_price’, true ); $offeroldprice = get_post_meta($post->ID, ‘rehub_offer_product_price_old’, true ); $domain = get_post_meta($post->ID, ‘rehub_offer_domain’, true ); $offerurl = get_post_meta($post->ID, ‘rehub_offer_product_url’, true ); if ($offerurl) { $out .='<div class=”compare-button-holder”>’; if ($offerprice) { $out .='<p class=”price”>’; $out .=$offerprice.’ ‘; if ($offeroldprice) { $out .='<del>’.$offeroldprice.'</del>’; } $out .='</p>’; } if($domain){ $out .='<div class=”mb10 compare-domain-icon”><span>Best deal on: </span>’; $out .=rehub_get_site_favicon(‘http://’.$domain); $out .='</div>’; } $out .='<a href=”‘.esc_url($offerurl).'” class=”re_track_btn wpsm-button rehub_main_btn btn_offer_block” target=”_blank” rel=”nofollow”>Buy for best price</a>’; $out .='</div>’; $out .='<style>.compare-button-holder .price {font-weight: normal;font-size: 1.5em;font-family: “Roboto”,Arial;letter-spacing: -0.5px; padding: 0 0 15px 0;margin: 0;}.mb10 { margin-bottom: 10px;}.compare-domain-icon {font-weight: bold;}.compare-domain-icon span { font-weight: normal;}.compare-domain-icon img {vertical-align: middle;max-width: 80px;}.compare-button-holder .wpsm-button.rehub_main_btn {box-shadow: 0 18px 38px 0 rgba(0,0,0,0.06),0 8px 40px 0 rgba(0,0,0,0.06);}.wpsm-button.rehub_main_btn {font-family: Roboto,trebuchet ms;position: relative;font-size: 18px;line-height: 18px;padding: 10px 20px;font-weight: 700;background: none #43c801;color: #fff !important;border: none;text-decoration: none; outline: 0;border-radius: 100px;cursor: pointer;display: inline-block;}.price del {font-size: 70%;opacity: 0.3;}</style>’; }     $newdata = $data->data[‘content’][‘rendered’].$out;    $data->data[‘content’][‘rendered’] = $newdata;    if($offerprice){ $newtitle = $data->data[‘title’][‘rendered’].’ – ‘.$offerprice;     $data->data[‘title’][‘rendered’] = $newtitle;         }     return $data;}

Controlliamolo nella dashboard di Worona.

qui vedete app su sito

Sì, funziona.

Ps ci sono molti altri buoni builder di wordpress, ad esempio Mobiloud. Ma la maggior parte di essi non è supportata ora o ha un prezzo troppo costoso. Ad esempio, Mobiloud ha un prezzo di $ 69 al mese, quindi, suppongo che siano migliori per le grandi aziende, non per i singoli siti, ma puoi anche controllare altri plugin, tutti hanno la stessa logica di funzionamento., bene spero sia tutto chiaro, ho fatto i vari passaggi html corretti quindi potete copiare e incollare cambiando id del vostro sito, affiliazione o drop che sia

vi ricordo che sono ben accetti commenti, iscrivetevi al sito, su fb e vari social se il vostro interesse è quello di crearvi un lavoro online, divenire nomade digitale essere finalmente libero potendo lavorare anche in riva al mare………

alla prossima postata vincente amici miei………….


Optimized with PageSpeed Ninja